Sahifaning moslashuvchan versiyasi nima?

Responsiv dizayn — bu veb-ishlab chiqarish yondashuvi bo‘lib, unda sahifa dizayni va kontenti foydalanuvchining qurilmasi ekran o‘lchamiga avtomatik moslashadi (stol kompyuter, planshet, smartfon).

Asosiy tamoyillar:

• Moslashuvchan tarmoq (Fluid Grids): Elementlarning o‘lchamlarini belgilash uchun foizlar yoki boshqa nisbiy birliklardan foydalanish, statik piksel o‘rniga.
• Moslashuvchan tasvirlar (Flexible Images): Tasvirlarning o‘lchamini proporsional ravishda o‘zgartirish, shunda ular konteynerdan chiqib ketmaydi.
• Media so‘rovlar (Media Queries): CSS qoidalari, qurilma xususiyatlariga, masalan, ekran kengligi, balandligi, orientatsiya va rezolyutsiyaga qarab turli uslublarni qo‘llash imkonini beradi.

CSSda media so‘rovdan foydalanish misoli:

/* Barcha qurilmalar uchun umumiy uslublar */
body {
    font-size: 16px;
}

/* 768px gacha kenglikdagi ekranlar uchun uslublar (masalan, planshetlar va mobil telefonlar) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Navigatsiya tartibini o‘zgartirish misoli */
        display: flex;
        flex-direction: column;
    }
}

/* 480px gacha kenglikdagi ekranlar uchun uslublar (masalan, mobil telefonlar) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Tasvirlar konteyner kengligini to‘liq egallaydi */
        max-width: 100%;
        height: auto;
    }
}

Responsiv dizayn maqsadi — saytni har qanday qurilmada qulay ishlatishni ta’minlash, sahifalarning alohida versiyalarini yaratmasdan.

Responsiv versiyani test qilish quyidagilarni o‘z ichiga oladi:

• Turli ekran o‘lchamlarida elementlarning to‘g‘ri ko‘rinishini tekshirish.
• Navigatsiya va interaktivlik qulayligini ta’minlash.
• Gorizontal skrollning oldini olish.
• Matnning o‘qilishi osonligini ta’minlash.
• Sahifa yuklanish tezligini baholash.