Адаптивна верстка media queries, alexdev

Сьогодні я б хотів продовжити обговорення адаптивної верстки.

У минулій статті ми обговорили, як зробити простенький адаптивний дизайн. Після створення ми виявили 1 великий мінус:

На невеликих екранах зображення будуть занадто дрібними.

Як вирішити проблему? Media Queries!

Дану проблему можна вирішити завдяки новій можливості CSS: media queries.

З їх допомогою ми можемо відстежувати дозвіл екрана користувача і відображати необхідні стилі для кожного дозволу або пристрою.

В результаті, якщо у користувача екран менше або дорівнює 960 пікселів, то задній фон для класу .class буде червоним.

Таким чином ми можемо підлаштовувати наші стилі під кожен екран окремо.

Умови для Media Queries

Умови можна задати наступні умови:

Особисто я найчастіше використовую перша умова.

Способи підключення CSS-таблиць

Так само можна додавати умови, для яких екранів буде підключатися та чи інша таблиця стилів:

Давайте доопрацюємо приклад з минулої статті:

При невеликому дозволі картинки стають занадто дрібними, а текст в заголовку величезним.

Вирішимо нашу проблему!

Додаємо Media Queries

Додамо в CSS наступний код:

Ми додали перевірку на дозвіл. Якщо дозвіл екрана менше або дорівнює 768 пікселів, то наша галерея перебудовується. В ряд у нас вміщується тепер по 2 зображення (width 48% + padding 2%).

В результаті фотографії на екрані планшета стали виглядати набагато краще!

Тепер розберемося з екраном поменше.

Після додавання цього коду при дозволі екрану менше або рівного 480 пікселів, зображення знову перебудовуються і тепер відображаються по одному в ряд.

Тепер ми маємо фотогалерею, яка зручно підлаштовується під пристрої. При бажанні можна додати і інші дозволи (320 пкс, 960 ПКС і т.д.).

Нічого складного і така гарна можливість підлаштувати наш сайт під різні екрани!