Media Screen CSS в адаптивній верстці, Серйозний блог про серйозне
Настав час розібратися, що таке Media Screen у CSS3 і як це застосовувати у своїх проектах. Це так звані медіа-запити CSS, за допомогою яких можна адаптувати елементи дизайну під різні розміри екранів. Наприклад, можна приховати певний блок на мобільних і навпаки показувати його тільки на широких екранах (десктопах). Як я з цим зіткнувся. На клієнтському сайті логотип на мобільних з'їжджає праворуч, на комп'ютерах він навпаки ліворуч. Було поставлено завдання написати текст, який буде показаний ліворуч від лого на маленьких екранах. На великих його не повинно бути. На допомогу якраз і прийшли медіа-запити Media Screen CSS. Я знаю, що багато хто з вас дуже любить, коли їм показують наочно, тому приготував приклад.
Media-screen приклади
Якщо хтось думає, що це дуже складно і незбагненно, то зараз ваша думка зміниться і ви на моєму прикладі переконаєтеся в тому, що не такий страшний чорт, як його малюють. Отже, у нас є сторінка, на якій є шапка з картинкою та блок із контентом чорного кольору на жовтому фоні.
CSS код зараз такий:
Ставимо собі завдання на екранах шириною менше 1000 px змінювати колір тексту, фону, пофарбувати шапку, змістити значок праворуч, а ліворуч від нього буде з'являтися напис. І виглядатиме це ось так:
Тобто, ми зробимо кардинальні зміни на сторінці засобами Media screen CSS. Для цього пишемо ті самі медіа-запити, які будуть визначати ширину екрана девайса та видавати той чи інший вигляд.
Детальніше можна подивитися код демонстраційної сторінки і самостійно розібратися що до чого.
Сподіваюся, що ви вловили мою думку, яку я хотів донестидо вас щодо медіа-запитів. Таким чином, можна створювати окремі таблиці стилів CSS спеціально для певних пристроїв. Такий підхід буде набагато правильнішим, ніж прописувати всі стилі для кожного пристрою в одному файлі. Підключається це так:
Можна також взяти готові стилі з Bootstrap CSS і підігнати під свій дизайн.