Rezinli maket: quruluş prinsipləri və adaptivdən fərqi

Rezinli maket nədir

Rezinli maket (liquid layout, fluid layout) — elementlərin ölçülərinin sabit piksellərlə deyil, nisbi vahidlərlə təyin olunduğu düzüm yanaşmasıdır. Bu, səhifənin üfqi sürüşdürmə olmadan brauzer pəncərəsi ilə birlikdə miqyaslanmasına imkan verir.

Rezinli düzüm konsepsiyası hələ müxtəlif qətnaməli stolüstü monitorlar dövründə yaranmışdır. 2000-ci illərdə 960 piksellik sabit eni olan saytlar 15 düymlük və 30 düymlük monitorlarda pis görünürdü. Rezinli maket bu problemi həll etdi.

Web Almanac (2024)-in məlumatına görə, müasir saytların 78%-i nisbi vahidlər vasitəsilə rezinli düzüm elementlərindən istifadə edir. Təmiz rezinli maketlər daha az rast gəlinir — əsasən dashboard və idarəetmə panellərində.

Tarixi kontekst

Rezinli düzüm Con Allsopp-un 2000-ci ildə dərc etdirdiyi «A Dao of Web Design» məqaləsindən sonra məşhurlaşdı, orada sabit piksellərdən nisbi vahidlərin lehinə imtina etməyə çağırdı. Bu manifest bütün responsive dizayn üçün fəlsəfi əsas qoydu.

Nisbi ölçü vahidləri: faizlər, vw, vh

Əsas nisbi vahidlər CSS-də iki qrupa bölünür: valideyn elementinə nisbətən (faizlər) və viewport-a nisbətən (vw, vh, vmin, vmax). Hər qrup rezinli düzümdə öz vəzifələrini həll edir.

/* 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;
}

Faizlər valideyn konteynerinin eninə nisbətən hesablanır. İç-içə faizlər bəzən gözlənmədiy nəticələr verən kaskad hesablamalar yarada bilər. vw/vh vahidləri viewport-a bağlıdır və valideyn konteynerlərini nəzərdən qaçırır — bu tam ekran bölmələr üçün əlverişlidir.

Şriftlər üçün rem vahidi

Rezinli düzümdə təkcə blokların enini nisbi vahidlərlə təyin etmək deyil, həm də şrifölçüsünü təyin etmək vacibdir. rem (root em) vahidi mətnin ölçüsünü HTML kök elementinə bağlayır. html-də font-size dəyişdirilərək səhifədəki bütün mətni miqyaslamaq olar.

/* 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 */
}

Rezinli vs adaptiv maket

Əsas fərq rezinli və adaptiv maket arasında enin dəyişmə xarakteridir. Rezinli maket pəncərənin istənilən dəyişməsində fasiləsiz dəyişir, adaptiv isə media queries vasitəsilə diskret olaraq dəyişir.

Rezinli maket — fasiləsiz miqyaslama, adaptiv — sabit maketlər arasında keçid. Hər yanaşmanın güclü və zəif tərəfləri var.

Praktikada müasir saytların əksəriyyəti hibrid yanaşmadan istifadə edir: nisbi vahidlərlə rezinli şəbəkə + kritik breakpoint-lar üçün media queries. Media queries olmadan təmiz rezinli düzüm çox geniş və ya çox dar ekranlarda səliqəsiz görünə bilər.

CSS-də rezinli düzümü necə həyata keçirmək

Əsas tətbiq rezinli maketin üç komponenti əhatə edir: nisbi genişlik vahidləri, maksimal/minimal məhdudiyyətlər və yerin paylanması üçün flexbox və ya 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 yanaşması flex: 1 1 30% ilə konteynerin eninin təxminən 30%-ni tutan, lakin 250px-ə qədər darala bilən kartlar yaradır. Kartlar çox olduqda, növbəti sətirə keçirlər. Grid yanaşması auto-fit və minmax ilə konteynerə sığan sütunları avtomatik yaradır.

Məhdudiyyətlər: min-width və max-width

Əsas problem təmiz rezinli düzümdə — çox geniş ekranlarda mətn sətri 2000+ pikselə qədər uzanır, bu da oxumağı qeyri-mümkün edir. Həll üçün CSS-in min-width, max-width xüsusiyyətləri istifadə olunur.

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

max-width: 1200px çox geniş monitorlarda məzmunun uzanmasının qarşısını alır. min-width: 320px kiçik ekranlarda konteynerin minimum enini təmin edir. width: 90% + max-width kombinasiyası limitli rezinli konteyner yaradır — müasir veb dizaynda ən populyar nümunə.

HTTP Archive (2025)-in məlumatına görə, top-1000-dəki saytların 92%-i məzmun blokları üçün max-width istifad edir. Desktop maketlər üçün standart dəyər 1140–1200 pikseldir.

Hibrid yanaşma: rezinli + adaptiv

Müasir veb dizayn nadir hallarda təmiz rezinli və ya təmiz adaptiv yanaşmadan istifadə edir. Hibrid metod hər ikisinin üstünlüklərini birləşdirir: nisbi vahidlərdə rezinli şəbəkə + qlobal yenidənqurma üçün 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 və 3fr rezinli sütunlardan istifadə edir — nisbət pəncərənin istənilən enində qorunur. Mobil cihazlarda media query bir sütunlu sxemə keçir, burada sütunlar şaquli yerləşir.

Hibrid yanaşmanın üstünlüyü — developer daha az media queries yazır, çünki rezinli şəbəkə avtomatik olaraq aralıq ölçülərə uyğunlaşır. Media queries yalnız strukturun kritik dəyişiklikləri üçün lazımdır, ekran eninin hər addımı üçün yox.