Бетінің бейімделген нұсқасы дегеніміз не?

Адаптивті дизайн — бұл веб-әзірлеу тәсілі, онда беттегі дизайн мен мазмұн автоматты түрде қолданушы құрылғысының экранының өлшеміне бейімделеді (десктоп, планшет, смартфон).

Негізгі принциптері:

• Икемді тор (Fluid Grids): Элементтердің өлшемдерін белгілеу үшін пайыздар немесе басқа салыстырмалы бірліктерді пайдалану, нақты пиксельдер орнына.
• Икемді суреттер (Flexible Images): Суреттердің өлшемін пропорционалды түрде өзгерту, олар контейнер шекарасынан шықпау үшін.
• Медиа сұраулар (Media Queries): CSS ережелері, олар құрылғының сипаттамаларына байланысты әртүрлі стильдерді қолдануға мүмкіндік береді, мысалы, экранның ені, биіктігі, бағыты және ажыратымдылығы.

CSS-те медиа сұрауды қолданудың мысалы:

/* Барлық құрылғылар үшін жалпы стильдер */
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;
    }
}

Адаптивті дизайн мақсаты — сайтты кез келген құрылғыда ыңғайлы пайдалану үшін бөлек бет нұсқаларын жасаудың қажеті болмайтындай ету.

Адаптивті нұсқаны тестілеу кезінде келесі аспектілер тексеріледі:

• Әр түрлі ажыратымдылықтарда элементтердің дұрыс көрсетілуі.
• Навигация мен өзара әрекеттің ыңғайлылығы.
• Горизонтальды айналдырудың болмауы.
• Мәтіннің оқылуы.
• Бетті жүктеу өнімділігі.