Moslashuvchan (responsive) dizayn - HTML va CSS

Bugun internet trafikning 60% dan ortig'i telefonlardan keladi. Sayt barcha ekranlarda ishlashi - endi tanlov emas, talab.

Viewport meta tegi #

Barchasi shu qatordan boshlanadi:

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Usiz hech narsa ishlamaydi

Bu tegsiz mobil brauzer sahifani 980px kenglikda ko'rsatadi va uni kichraytiradi. Natijada barcha matn o'qib bo'lmas darajada kichik bo'ladi va media so'rovlaringiz umuman ishlamaydi.

Har bir HTML sahifada bu qator birinchi navbatda bo'lishi kerak.

Mobile-first yondashuv #

Ikki xil yozish usuli bor:

CSS

/* Desktop-first: kattadan kichikka */
.karta { width: 33%; }

@media (max-width: 768px) {
    .karta { width: 100%; }
}


/* Mobile-first: kichikdan kattaga - TAVSIYA ETILADI */
.karta { width: 100%; }

@media (min-width: 768px) {
    .karta { width: 33%; }
}

Mobile-first: eng sodda holatdan boshlab, murakkablikni qo'shib borish

Nima uchun mobile-first afzal?

Telefon - eng cheklangan muhit. Undan boshlash muhim narsalarni ajratishga majbur qiladi.
Kod kamroq. Mobil versiya odatda sodda - qo'shimcha qoidalar kamroq.
Tezroq. Telefon faqat kerakli CSS ni qayta ishlaydi.
Google mobile-first indekslash ishlatadi - sayt telefonda qanday ko'rinishi SEO ga ta'sir qiladi.

Media so'rovlar #

CSS

/* Kenglik bo'yicha */
@media (min-width: 768px)  { /* 768px va undan keng */ }
@media (max-width: 767px)  { /* 767px va undan tor */ }
@media (min-width: 768px) and (max-width: 1023px) { /* faqat planshet */ }

/* Yo'nalish */
@media (orientation: landscape) { /* gorizontal */ }
@media (orientation: portrait)  { /* vertikal */ }

/* Chop etish */
@media print {
    .menyu, .reklama { display: none; }
    body { font-size: 12pt; color: #000; }
}

/* Foydalanuvchi sozlamalari */
@media (prefers-color-scheme: dark) { /* qorong'i rejim */ }
@media (prefers-reduced-motion: reduce) { /* animatsiyani kamaytirish */ }

Standart chegaralar #

CSS

/* Kichik telefon: asosiy CSS, media so'rov kerak emas */

@media (min-width: 480px)  { /* katta telefon */ }
@media (min-width: 768px)  { /* planshet */ }
@media (min-width: 1024px) { /* noutbuk */ }
@media (min-width: 1280px) { /* katta ekran */ }

Chegaralarni qurilmaga emas, mazmuniga qarab tanlang

"iPhone 14 kengligi 390px" deb chegara qo'ymang - qurilmalar juda ko'p va har yili yangilanadi.

To'g'ri yondashuv: brauzer oynasini asta kengaytiring va dizayn buzilgan joyda chegara qo'ying. Bu "mazmunga asoslangan chegaralar" deyiladi.

Media so'rovsiz moslashuv #

Ko'p hollarda media so'rov umuman kerak emas:

CSS

/* 1. Moslashuvchan tarmoq */
.kartalar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* 2. Moslashuvchan flexbox */
.qator {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.qator > * { flex: 1 1 260px; }

/* 3. Moslashuvchan o'lcham */
.sarlavha {
    font-size: clamp(1.75rem, 5vw, 3.5rem);
}

/* 4. Moslashuvchan kenglik */
.orash {
    width: min(1200px, 100% - 3rem);
    margin-inline: auto;
}

/* 5. Moslashuvchan masofa */
.bolim {
    padding-block: clamp(2rem, 8vw, 6rem);
}

clamp() - eng foydali zamonaviy funksiya

CSS

font-size: clamp(minimal, moslashuvchan, maksimal);
font-size: clamp(1.75rem, 5vw, 3.5rem);

Telefonda: 1.75rem dan kichik bo'lmaydi
Oralig'ida: ekran kengligiga qarab o'sadi
Katta ekranda: 3.5rem dan oshmaydi

Bitta qator o'nlab media so'rov o'rnini bosadi.

Moslashuvchan rasmlar #

CSS

/* Majburiy minimum */
img, video {
    max-width: 100%;
    height: auto;
}

/* Nisbatni saqlash */
.rasm-orash {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.rasm-orash img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

HTML

<!-- Ekran o'lchamiga qarab turli rasm -->
<img src="rasm-800.jpg"
     srcset="rasm-400.jpg 400w,
             rasm-800.jpg 800w,
             rasm-1600.jpg 1600w"
     sizes="(max-width: 640px) 100vw,
            (max-width: 1024px) 50vw,
            33vw"
     alt="Tavsif"
     loading="lazy">

sizes nima qiladi?

U brauzerga rasm qancha joy egallashini aytadi:

640px dan tor ekranda - butun kenglik (100vw)
1024px gacha - yarmi (50vw)
Kattaroqda - uchdan biri (33vw)

Shunga qarab brauzer srcset dan eng mos rasmni tanlaydi va telefonga 1600px li rasm yuklamaydi.

Mobil menyu #

CSS va minimal JavaScript bilan:

HTML

<header class="panel">
    <a class="logo" href="/">Softromeda</a>

    <button class="menyu-tugma" aria-expanded="false" aria-controls="asosiy-menyu">
        <span class="menyu-tugma__chiziq"></span>
        <span class="menyu-tugma__chiziq"></span>
        <span class="menyu-tugma__chiziq"></span>
        <span class="vizual-yashirin">Menyu</span>
    </button>

    <nav class="menyu" id="asosiy-menyu">
        <a href="/">Bosh sahifa</a>
        <a href="/darsliklar">Darsliklar</a>
        <a href="/aloqa">Aloqa</a>
    </nav>
</header>

CSS

.panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    position: relative;
}

/* Tugma - faqat telefonda ko'rinadi */
.menyu-tugma {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.menyu-tugma__chiziq {
    display: block;
    width: 24px;
    height: 2px;
    background: #0f172a;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
}

/* Menyu - telefonda yashirin */
.menyu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
    gap: 0.75rem;
}

.menyu.ochiq {
    display: flex;
}

/* Ekran kranglashsa - oddiy menyu */
@media (min-width: 768px) {
    .menyu-tugma { display: none; }

    .menyu {
        display: flex;
        flex-direction: row;
        position: static;
        border: none;
        padding: 0;
        gap: 1.5rem;
    }
}

/* Faqat ekran o'quvchisi uchun matn */
.vizual-yashirin {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

JavaScript

const tugma = document.querySelector(".menyu-tugma");
const menyu = document.querySelector(".menyu");

tugma.addEventListener("click", () => {
    const ochiqmi = menyu.classList.toggle("ochiq");
    tugma.setAttribute("aria-expanded", ochiqmi);
});

aria-expanded ni unutmang

Ekran o'quvchisi menyu ochiq yoki yopiqligini faqat shu atribut orqali biladi. Uni JavaScript da har safar yangilash kerak.

Bosish maydoni #

Telefonda tugmalar kichik bo'lmasin

Barmoq bilan aniq bosish uchun minimal o'lcham - 44 × 44 piksel (Apple tavsiyasi) yoki 48 × 48 (Google tavsiyasi).

CSS

.tugma,
.menyu a,
input[type="checkbox"] + label {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
}

Kichik havolalar telefon foydalanuvchilarini eng ko'p bezovta qiladigan narsa.

Chop etish uslublari #

CSS

@media print {
    .menyu,
    .yon-panel,
    .reklama,
    .izohlar,
    footer {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";     /* havolani ko'rsatish */
        font-size: 10pt;
        color: #555;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }

    img, table, figure {
        page-break-inside: avoid;
    }
}

Sinash #

Usul	Qanday
DevTools	`F12` → `Ctrl`+`Shift`+`M` (qurilma rejimi)
Oynani o'zgartirish	Brauzer chetini sekin torting
Haqiqiy qurilma	Eng ishonchli usul
Lighthouse	DevTools → Lighthouse → Mobile

Eng oddiy sinov

Brauzer oynasini asta-sekin toraytiring va quyidagilarni kuzating:

Gorizontal aylantirish paydo bo'ldimi? (bo'lmasligi kerak)
Matn juda kichiklashdimi?
Tugmalar bosish uchun yetarli kattami?
Rasmlar chetdan chiqib ketdimi?
Jadval sig'dimi?

To'liq misol #

CSS

/* ===== Asosiy: telefon ===== */
:root {
    --orash: 1200px;
    --chekinish: 1rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; }

.orash {
    width: min(var(--orash), 100% - var(--chekinish) * 2);
    margin-inline: auto;
}

.qahramon__sarlavha {
    font-size: clamp(1.75rem, 6vw, 3.5rem);
    line-height: 1.15;
}

.qahramon__matn {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    max-width: 55ch;
}

.bolim {
    padding-block: clamp(2.5rem, 8vw, 5rem);
}

.kartalar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: clamp(1rem, 3vw, 2rem);
}

.sahifa {
    display: grid;
    gap: 2rem;
}

/* ===== Planshet ===== */
@media (min-width: 768px) {
    :root { --chekinish: 1.5rem; }

    .sahifa {
        grid-template-columns: 1fr 280px;
    }
}

/* ===== Kompyuter ===== */
@media (min-width: 1024px) {
    :root { --chekinish: 2rem; }

    .sahifa {
        grid-template-columns: 220px 1fr 280px;
    }
}

/* ===== Foydalanuvchi sozlamalari ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

minmax(min(280px, 100%), 1fr)

Bu ichma-ich funksiya bitta muammoni hal qiladi: ekran 280px dan tor bo'lsa (masalan, eski telefon), minmax(280px, 1fr) gorizontal aylantirish hosil qiladi. min(280px, 100%) esa ustunni ekrandan kengroq qilmaydi.

Amaliy topshiriq

Barcha sahifalaringizga viewport meta tegini qo'shing (agar yo'q bo'lsa).
Mobile-first uslubda kartochkalar tarmog'ini yozing: telefonda 1, planshetda 2, kompyuterda 3 ustun.
Sarlavhalarni clamp() bilan moslashuvchan qiling.
Mobil menyu yarating (HTML + CSS + 5 qator JavaScript).
Barcha bosiladigan elementlarni kamida 44px balandlikda qiling.
@media print bilan chop etish uslubini qo'shing va Ctrl+P bilan tekshiring.
DevTools qurilma rejimida iPhone SE, iPad va Desktop da sinang.
Lighthouse testini o'tkazing - Mobile ko'rsatkichi 90 dan yuqori bo'lsin.

Xulosa #

Viewport meta tegi - moslashuvchan dizaynning majburiy birinchi qadami.
Mobile-first: asosiy CSS telefon uchun, min-width bilan kengaytiring.
Chegaralarni qurilmaga emas, dizayn buzilgan nuqtaga qarab tanlang.
clamp(), min(), auto-fit va flex-wrap media so'rovlarsiz moslashish beradi.
img { max-width: 100%; height: auto; } - majburiy juftlik.
srcset va sizes telefonlarga kichikroq rasm yuboradi.
Bosiladigan elementlar kamida 44×44px bo'lsin.
prefers-reduced-motion ni hurmat qiling.

Keyingi bo'limda CSS o'zgaruvchilari va animatsiyalarni o'rganamiz.

Viewport meta tegi #

Mobile-first yondashuv #

Media so'rovlar #

Standart chegaralar #

Media so'rovsiz moslashuv #

Moslashuvchan rasmlar #

Mobil menyu #

Bosish maydoni #

Chop etish uslublari #

Sinash #

To'liq misol #

Xulosa #

Xatolik topdingizmi?