Какво е адаптивната версия на страницата?

Отзивчивият дизайн е подход в уеб разработката, при който дизайнът и съдържанието на страницата се адаптират автоматично към размера на екрана на устройството на потребителя (десктоп, таблет, смартфон).

Основни принципи:

• Гъвкава мрежа (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;
    }
}

Целта на отзивчивия дизайн е да осигури удобство при използване на сайта на всяко устройство без необходимост от създаване на отделни версии на страниците.

Тестването на отзивчивата версия включва проверка:

• Правилното показване на елементите при различни резолюции.
• Удобството при навигация и взаимодействие.
• Липсата на хоризонтално превъртане.
• Четливостта на текста.
• Производителността при зареждане на страницата.