Kauchukli maket: qurilish tamoyillari va adaptivdan farqi

Kauchukli maket nima

Kauchukli maket (liquid layout, fluid layout) — elementlarning o‘lchamlari sobit piksellarda emas, nisbiy birliklarda belgilanadigan kodlash yondashuvi. Bu sahifaning gorizontal aylantirmasdan brauzer oynasi bilan birga masshtablanishiga imkon beradi.

Kauchukli kodlash konsepsiyasi turli rezolyutsiyali stol monitorlar davrida paydo bo‘lgan. 2000-yillarda 960 piksel sobit kenglikdagi saytlar 15 dyuymli va 30 dyuymli monitorlarda yomon ko‘rinardi. Kauchukli maket bu muammoni hal qildi.

Web Almanac (2024) ma’lumotlariga ko‘ra, zamonaviy saytlarning 78% nisbiy birliklar orqali kauchukli kodlash elementlaridan foydalanadi. Sof kauchukli maketlar kamroq uchraydi — asosan dashboardlar va boshqaruv panellarida.

Tarixiy kontekst

Kauchukli kodlash Jon Allsoppning 2000-yilda chop etilgan «A Dao of Web Design» maqolasidan so‘ng mashhur bo‘ldi, unda u sobit piksellardan nisbiy birliklar foydasiga voz kechishga chaqirdi. Bu manifest butun responsive dizayn uchun falsafiy asos yaratdi.

Nisbiy o‘lchov birliklari: foizlar, vw, vh

Asosiy nisbiy birliklar CSSda ikki guruhga bo‘linadi: ota-elementga nisbatan (foizlar) va viewportga nisbatan (vw, vh, vmin, vmax). Har bir guruh kauchukli kodlashda o‘z vazifalarini hal qiladi.

/* Percent — width relative to parent */
.sidebar {
    width: 30%;
}

.content {
    width: 70%;
}

/* vw/vh — viewport-based units */
.hero-section {
    width: 100vw;
    height: 80vh;
}

.fullscreen-modal {
    width: 90vmin;
}

Foizlar ota-konteynerning kengligiga nisbatan hisoblanadi. Ichma-ich foizlar ba’zan kutilmagan natijalar beradigan kaskad hisob-kitoblarni yaratishi mumkin. vw/vh birliklari viewportga bog‘langan va ota-konteynerlarni e’tiborsiz qoldiradi — bu to‘liq ekran bo‘limlari uchun qulay.

Shriftlar uchun rem birligi

Kauchukli kodlashda faqat bloklarning kengligini nisbiy birliklarda belgilash emas, balki shrift o‘lchamini ham belgilash muhimdir. rem (root em) birligi matn o‘lchamini HTML ildiz elementiga bog‘laydi. html-da font-size ni o‘zgartirib, sahifadagi barcha matnni masshtablash mumkin.

/* Global text scaling via rem */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

.heading {
    font-size: 2.4rem; /* = 24px */
}

.body-text {
    font-size: 1.6rem; /* = 16px */
}

Kauchukli vs adaptiv maket

Asosiy farq kauchukli va adaptiv maket o‘rtasida kenglikning o‘zgarish xarakteridir. Kauchukli maket oynaning har qanday o‘zgarishida uzluksiz o‘zgaradi, adaptiv esa media queries orqali diskret ravishda o‘zgaradi.

Kauchukli maket — uzluksiz masshtablash, adaptiv — sobit maketlar o‘rtasida almashish. Har bir yondashuvning kuchli va zaif tomonlari bor.

Amaliyotda zamonaviy saytlarning aksariyati gibrid yondashuvdan foydalanadi: nisbiy birliklar bilan kauchukli to‘r + muhim breakpointlar uchun media queries. Media querysiz sof kauchukli kodlash juda keng yoki juda tor ekranlarda tartibsiz ko‘rinishi mumkin.

CSSda kauchukli kodlashni qanday amalga oshirish

Asosiy tatbiq kauchukli maket uch komponentni o‘z ichiga oladi: nisbiy kenglik birliklari, maksimal/minimal cheklovlar va bo‘sh joyni taqsimlash uchun flexbox yoki grid.

/* Fluid grid with Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 30%;
    min-width: 250px;
}

/* Fluid grid with CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Flexbox yondashuvi flex: 1 1 30% bilan konteyner kengligining taxminan 30% ni egallaydigan, lekin 250px gacha torayishi mumkin bo‘lgan kartalar yaratadi. Kartalar ko‘p bo‘lganda, ular keyingi qatorga o‘tadi. Grid yondashuvi auto-fit va minmax bilan konteynerga sig‘adigan ustunlarni avtomatik yaratadi.

Cheklovlar: min-width va max-width

Asosiy muammo sof kauchukli kodlashda — juda keng ekranlarda matn qatori 2000+ pikselgacha cho‘ziladi, bu o‘qishni imkonsiz qiladi. Yechim uchun CSSning min-width, max-width xususiyatlari ishlatiladi.

/* Container limits for readability */
.content-wrapper {
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

max-width: 1200px juda keng monitorlarda kontentning cho‘zilishini oldini oladi. min-width: 320px kichik ekranlarda konteynerning minimal kengligini kafolatlaydi. width: 90% + max-width kombinatsiyasi cheklangan kauchukli konteyner yaratadi — zamonaviy veb dizayndagi eng mashhur namuna.

HTTP Archive (2025) ma’lumotlariga ko‘ra, top-1000 dagi saytlarning 92% kontent bloklari uchun max-width dan foydalanadi. Desktop maketlar uchun standart qiymat 1140–1200 piksel.

Gibrid yondashuv: kauchukli + adaptiv

Zamonaviy veb dizayn kamdan-kam hollarda sof kauchukli yoki sof adaptiv yondashuvdan foydalanadi. Gibrid metod ikkalasining afzalliklarini birlashtiradi: nisbiy birliklarda kauchukli to‘r + global qayta qurish uchun media queries.

/* Hybrid: fluid base + media query */
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

Desktopda maket 1fr va 3fr kauchukli ustunlardan foydalanadi — nisbat oynaning istalgan kengligida saqlanadi. Mobil qurilmalarda media query bir ustunli sxemaga o‘tadi, bu erda ustunlar vertikal joylashadi.

Gibrid yondashuvning afzalligi — developer kamroq media queries yozadi, chunki kauchukli to‘r avtomatik ravishda oraliq o‘lchamlarga moslashadi. Media queries faqat strukturaning muhim o‘zgarishlari uchun kerak, ekran kengligining har bir bosqichi uchun emas.