Ի՞նչ է էջի ադապտիվ տարբերակը։

Անհատականացված դիզայնը վեբ զարգացման մոտեցում է, որի ժամանակ էջի դիզայնն ու բովանդակությունը ավտոմատ կերպով հարմարեցվում են օգտվողի սարքի էկրանին (դեսկտոպ, պլանշետ, սմարթֆոն):

Հիմնական սկզբունքները՝

• Համընկնող ցանց (Fluid Grids): Օգտագործվում են տոկոսներ կամ այլ հարաբերական միավորներ՝ տարրերի չափերը սահմանելու համար՝ ֆիքսված պիքսելների փոխարեն:
• Համընկնող պատկերներ (Flexible Images): Պատկերների չափերը փոխում են հարաբերականորեն՝ որպեսզի դրանք չանցնեն կոնտեյների սահմանները:
• Մեդիա հարցումներ (Media Queries): CSS կանոններ, որոնք թույլ են տալիս կիրառել տարբեր ոճեր՝ կախված սարքի բնութագրերից՝ ինչպիսիք են էկրանին լայնությունը, բարձրությունը, ուղղությունը և լուծաչափը:

CSS-ում media query-ի օգտագործման օրինակ՝

/* Ամեն սարքի համար ընդհանուր ոճեր */
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;
    }
}

Անհատականացված դիզայնի նպատակը՝ ապահովել կայքի հարմարավետ օգտագործումը ցանկացած սարքում՝ առանց էջերի տարբերակներ ստեղծելու անհրաժեշտության:

Տեստավորում՝

• տարբեր լուծաչափերում տարրերի ճիշտ ցուցադրումը;
• նավիգացիայի և փոխազդեցության հարմարավետությունը;
• հորիզոնական սլաքի բացակայությունը;
• տեքստի ընթեռնելիությունը;
• էջի բեռնումի արդյունավետությունը։