Версияи мутобиқсозии саҳифа чист?

Реактив дизайни — бу веб-дастурлашда ёндашув бўлиб, унда саҳифанинг дизайн ва мазмуни фойдаланувчининг қурилмаси экран ўлчамига автоматик равишда мослашади (стол компьютер, планшет, смартфон).

Асосий принциплар:

• Мўлжалланган тор (Fluid Grids): Элементларнинг ўлчамларини белгилаш учун фоизлар ёки бошқа нисбий бирликлардан фойдаланиш, статик пикселлар ўрнига.
• Мўлжалланган расмлар (Flexible Images): Расмларнинг мослашувчан ўлчамда ўзгартирилиши, шунда улар контейнерига чиқиб кетмаслиги учун.
• Медиа сўровлар (Media Queries): CSS қоидалари, қурилманинг хусусиятларига, масалан, экран кенглиги, баландлиги, йўналиши ва ечимига қараб турли услубларни қўллаш имконини беради.

CSSда media сўровдан фойдаланиш мисоли:

/* Барча қурилмалар учун умумий услублар */
body {
    font-size: 16px;
}

/* 768px гача кенгликдаги экранлар учун услублар (масалан, планшетлар ва мобил телефонлар) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Навигация тартибини ўзгартириш мисоли */
        display: flex;
        flex-direction: column;
    }
}

/* 480px гача кенгликдаги экранлар учун услублар (масалан, мобил телефонлар) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Расмлар контейнернинг тўлиқ кенглигини эгаллайди */
        max-width: 100%;
        height: auto;
    }
}

Реактив дизайн мақсади — сайтни ҳар қандай қурилмада қулай фойдаланишини таъминлаш, алоҳида версиялар яратишга эҳтиёжсиз.

Реактив версияни тестлашда қуйидагиларни текшириш:

• Турли ечишларда элементларнинг тўғри кўрсатилиши.
• Навигация ва ўзаро таъсирнинг осонлиги.
• Гориҳон скролнинг йўқлиги.
• Матннинг ўқилиши.
• Саҳифа юкланиш тезлиги.