Səhifənin adaptiv versiyası nədir?

Uyumlu dizayn veb inkişafda yanaşmadır ki, burada səhifənin dizaynı və məzmunu istifadəçinin cihaz ekran ölçüsünə avtomatik uyğunlaşır (masaüstü, planşet, smartfon).

Əsas prinsiplər:

• Əlavə şəbəkə (Fluid Grids): Elementlərin ölçülərini təyin etmək üçün faizlər və ya digər nisbi vahidlərdən istifadə, sabit piksel yerinə.
• Əlavə şəkillər (Flexible Images): Şəkillərin nisbətinə uyğun ölçüsünü dəyişmək, belə ki, onlar konteynerdən çıxmasın.
• Media sorğuları (Media Queries): CSS qaydaları, cihazın xüsusiyyətlərinə, məsələn, ekran genişliyi, hündürlüyü, istiqaməti və həllinə görə müxtəlif stillər tətbiq etməyə imkan verir.

CSS-də media sorğusunun istifadəsi nümunəsi:

/* Bütün cihazlar üçün ümumi stillər */
body {
    font-size: 16px;
}

/* 768px-ə qədər genişliyə malik ekranlar üçün stillər (məsələn, planşet və mobil telefonlar) */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    nav {
        /* Naviqasiya düzəninin dəyişdirilməsi nümunəsi */
        display: flex;
        flex-direction: column;
    }
}

/* 480px-ə qədər genişliyə malik ekranlar üçün stillər (məsələn, mobil telefonlar) */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    img {
        /* Şəkillər konteynerin bütün genişliyini tutur */
        max-width: 100%;
        height: auto;
    }
}

Uyumlu dizaynın məqsədi, hər hansı bir cihazda saytın istifadəsini rahat etmək və səhifələrin ayrıca versiyalarını yaratmadan təmin etməkdir.

Uyumlu versiyanın testləri aşağıdakılardan ibarətdir:

• Müxtəlif həllərdə elementlərin düzgün göstərilməsi.
• Naviqasiya və qarşılıqlı əlaqənin asanlığı.
• Üfüqi sürüşmənin olmaması.
• Mətnin oxunaqlılığı.
• Səhifənin yükləmə performansı.