Saqlab olindi !

HTML va CSS bilan responsive sahifa yasash — amaliy qo'llanma

Bugungi kunda saytga kiruvchilarning yaridan ko'prog'i telefon orqali kiradi. Agar saytingiz faqat katta ekranda chiroyli ko'rinsa — siz foydalanuvchining yarmini yo'qotasiz. Responsive dizayn — bu ixtiyoriy emas, majburiy. Keling, noldan birinchi responsive sahifani birga yasaymiz.

Viewport — birinchi va majburiy qadam

<!DOCTYPE html>
<html lang="uz">
<head>
    <meta charset="UTF-8">
    <!-- BU QATOR BO'LMASA TELEFONDA SAHIFA KICHRAYIB KO'RINADI -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mening Saytim</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- kontent shu yerda -->
</body>
</html>

CSS birliklar — piksel emas, foiz va em

/* YOMON — piksel qattiq, o'lchamga mos kelmaydi */
.konteyner {
    width: 1200px;
    font-size: 16px;
}

/* YAXSHI — foiz va em moslashuvchan */
.konteyner {
    width: 90%;           /* ekran kengligining 90% */
    max-width: 1200px;    /* lekin 1200px dan oshmasin */
    margin: 0 auto;       /* markazlashtirish */
    font-size: 1rem;      /* brauzer standart o'lchamiga nisbatan */
}

Flexbox — elementlarni tartiblashtirish

.nav {
    display: flex;
    justify-content: space-between;  /* gorizontal tarqatish */
    align-items: center;              /* vertikal markazlashtirish */
    flex-wrap: wrap;                  /* tor ekranda pastga tushsin */
    gap: 16px;
}

/* Kartalar */
.kartalar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.karta {
    flex: 1 1 300px;  /* minimum 300px, kerakli bo'lsa kengayadi */
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
}

Media Query — ekran o'lchamiga qarab o'zgartirish

/* Katta ekran (standart) */
.menu {
    display: flex;
    gap: 20px;
}

.yonbosh {
    display: block;
    width: 250px;
}

/* Planshet (768px gacha) */
@media (max-width: 768px) {
    .menu {
        flex-direction: column;
    }

    .yonbosh {
        width: 100%;
    }
}

/* Telefon (480px gacha) */
@media (max-width: 480px) {
    .karta {
        padding: 12px;
    }

    h1 {
        font-size: 1.5rem;
    }
}

To'liq misol — responsive karta sahifasi

<div class="konteyner">
    <h1>Mahsulotlar</h1>
    <div class="kartalar">
        <div class="karta">
            <h2>Noutbuk</h2>
            <p>Yuqori unumdorli ishchi noutbuk</p>
            <span class="narx">8 500 000 so'm</span>
        </div>
        <div class="karta">
            <h2>Monitor</h2>
            <p>27 dyuym, 4K ekran</p>
            <span class="narx">3 200 000 so'm</span>
        </div>
        <div class="karta">
            <h2>Klaviatura</h2>
            <p>Mexanik, RGB yoritgichli</p>
            <span class="narx">850 000 so'm</span>
        </div>
    </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }

.konteyner { width: 90%; max-width: 1100px; margin: 40px auto; }

.kartalar { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; }

.karta {
    flex: 1 1 280px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
}

.narx { color: #2563eb; font-weight: bold; font-size: 1.1rem; }

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

Maslahat: Avval telefon uchun yozing (mobile-first), keyin katta ekranlar uchun kengaytiring. Bu yondashuv kodni yozishni osonlashtiradi va sayt telefonda tezroq yuklaydi.