Вибираємо медіа-запити min-width або max-width, CSS
Мені часто ставлять запитання на кшталт: Чи варто використовувати медіа-запити (media queries) min-width або max width CSS? Ті, хто знайомий з адаптивним дизайном, вважають це питання дивним, тому що знають, що все залежить від конкретного випадку. Сьогодні я радий поділитися з вами власною думкою про те, що насправді означає «залежить від конкретного випадку».
Орієнтир на настільні ПК та max-width
Більшість розробників досі орієнтується лише користувачів ПК. Часто усвідомлення ситуації приходить, коли стає зрозуміло, скільки сил було витрачено на компоненти для ПК, які все рідше затребувані через зростання кількості мобільних користувачів. При аналізі стилів подібних сайтів найчастіше зустрічається CSS media max width.
Ось приклад, яким я часто користуюся (припускаючи, що .related набуває форми бічної панелі):
Такий підхід під час використання з безліччю компонентів може істотно збільшити обсяг CSS завершеного проекту. Але оскільки блокові елементи за замовчуванням займають 100% ширини батьківського елемента, то розумніше було б прописати все так:
Тут ми використовуємо стандартне положення блокових елементів і перекриваємо їх, коли цей стан потрібно змінити. Щоб краще зрозуміти суть сказаного, потрібно вивчити робочий код таких сайтів.
max-width замість більш відповідного рішення
Є кілька причин використання в CSS min width max width :
То що краще використовувати?
Звертайте увагу на стандартний варіант відображення певного елемента. Якщо вам потрібно переписувати стандартний стан для меншихекранів, використовуйте max-width . Якщо елемент можна використовувати на менших екранах та при стандартному стані, застосовуйте min-width лише в тих випадках, коли елемент повинен відрізнятись від стандартного стану. І звичайно, я рекомендую вам дозволити контенту визначати, що і як має відбуватися.
Таблиці – чудовий приклад використання CSS div max width для зміни стандартного стану елемента, щоб він краще відображався на маленьких екранах. Уявіть таблицю, контенту в якій занадто багато, щоб повністю відображати її на маленьких пристроях. У такому разі ми можемо застосувати наступний код:
Цей код дозволить нам перетворити кожен рядок (і комірку) на блок. В результаті таблиця може стати довгою по вертикалі, але найчастіше це менше з зол. Я маю на увазі довгі таблиці, які потрібно прокручувати по горизонталі. У таких ситуаціях найкраще залишити таблиці без змін, за винятком коду для тих браузерів, які розуміють медіа-запити, і випадків коли ширина екрана не перевищує певного значення ( 30em в нашому випадку ).
Інші елементи, які у стандартному стані добре виглядають на невеликих екранах, необхідно змінювати лише за необхідності для екранів більшого розміру. У разі і застосовується min-width .
Коротко: дозвольте стандартному стану елементів допомогти вам визначити, який медіа-запит використовувати.
Дана публікація є перекладом статті «Choosing between min-width and max-width media queries», підготовленою дружною командою проекту Інтернет-технології.