CSS від А до Я: створюємо адаптивний дизайн за допомогою медіа запитів

28

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з медіа запитами.

М означає медіа запити

Ризикну припустити, що переважна більшість веб-дизайнерів і розробників знайомі з концепцією адаптивного дизайну. Якщо ж я помиляюся, подивіться відеоролик з медіа запитам.

Адаптивний дизайн такий популярний зараз, що пара зайвих порад щодо поліпшення розробки сайтів та додатків під безліч пристроїв не завадить. Так ось вам мої поради по CSS.

Порада 1: не використовуйте дозволу екранів конкретних пристроїв

Ну тут все зрозуміло без зайвих слів. Просто як нагадування, на той випадок, якщо ви не працювали з цією кращою практикою, варто згадати все ще раз.

Дозволу екрану під конкретні пристрої легко визначити у вашому коді медіа запитів. Це буде виглядати ось так (в коментарях пояснення):

/* ipad portrait */
@media screen and (min-width: 768px;) {}
/* ipad landscape */
@media screen and (min-width: 1024px;) {}
/* iphone */
@media screen and (min-width: 320px) and (max-width: 480px;) {}

Це дозволу для пристроїв Apple з «магічними» значеннями 768px і 1024px. А що якщо у користувача екран 1025px або 1023px? Медіа запити не спрацюють, і стилі під це пристрій не застосовується. Іноді може виникнути потреба в точних значеннях дозволів екрану, але такий код вважається ознакою поганого тону. Так як же вчинити?

Порада 2: встановіть головні дозволу та перехідні

Під час роботи над адаптивним проектом я зазвичай ставлю довільні числові точки, які приблизно збігаються з дозволами більшості смартфонів, планшетів, настільних ПК і ноутбуків. Особисто я використовував би такі головні точки. Іноді вони можуть змінюватися в залежності від проекту:

/* великі телефони і маленькі планшети */
@media screen and (min-width: 500px;) {}
/* планшети і маленькі монітори */
@media screen and (min-width: 800px;) {}
/* ноутбуки і настільні ПК */
@media screen and (min-width: 1200 px;) {}

Ці точки не обмежують дизайн, а задають добрий ґрунт для роботи з трьома типами пристроїв. В дизайні, основною частиною якого є контент (коли контент починає виглядати неправильно, незбалансовано або не влазить у блок), можна поставити проміжні точки і підштовхувати елементи, поліруючи дрібні деталі.

/* проміжна позиція для кнопку репоста */
@media screen and (min-width: 1150px;) {
margin-right: 1em;
}

Порада 3: використовуйте в якості одиниць виміру em або rem

Використовуйте замість px одну з цих відносних одиниць вимірювання для кращої масштабованості на випадок, якщо користувач збільшить сторінки або розмір шрифту. Як приклад, мої основні точки з одиницями вимірювання em будуть виглядати наступним чином.

/* 500px / 16px = 31.25 em */
@media screen and (min-width: 31.25 em;) {}
/* 800px / 16px = 50em */
@media screen and (min-width: 50em;) {}
/* 1200 px / 16px = 75em */
@media screen and (min-width: 75em;) {}