CSS Media Queries: покроковий опис, особливості та відгуки

Коли-то ті, хто відвідував веб-сайти зі смартфонів і аналогічних мобільних пристроїв, викликали лише сміх у оточуючих. Багато хто просто не могли зрозуміти, навіщо це потрібно, адже є такі зручні стаціонарні комп'ютери! Або, на худий кінець, ноутбуки. До того ж, мобільний інтернет тоді коштував дорого. Час минав. Інтернет дешевшав. У продаж виходило все більше телефонів і планшетів. Через деякий час власники популярних сайтів спантеличено чухали голови. За статистикою виходило, що їх ресурси частіше відвідують зі смартфонів, ніж зі стаціонарних ПК!


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

Поява CSS Media Queries

Виникла необхідність верстати ресурси так, щоб вони добре виглядали при перегляді з будь-якого екрану. Спочатку поширилася практика створення окремих сайтів під кожен розмір. Наприклад, відвідувач, який користувався мобільним телефоном, потрапляв на один ресурс, а той, що «сидів» з комп'ютера на інший. Але це було довго, дорого і незручно. Потім виникли CSS3 Media Queries. З їх допомогою з'явилася проста можливість реалізації динамічного дизайну.

Що таке динамічний дизайн?

Цей термін використовується, якщо зовнішній вигляд ресурсу змінюється у відповідності з розмірами екрану, на якому його переглядають. Як це зрозуміти? Все просто. Уявіть, що у вас є сайт. У верхній частині розташовано меню навігації. Горизонтальне. Воно розтягується на всю ширину сторінки. Під ним знаходиться блок з контактною інформацією. Телефон та адресу теж рознесені по двом блокам і розташовані горизонтально, поруч один з одним. Під цим блоком – основний контент, а ліворуч або праворуч розташувався сайдбар. Внизу, як водиться, футер.


Це «класична» схема розташування компонентів. Вона відмінно підходить для персонального комп'ютера, але не дуже зручна для мобільних телефонів. Горизонтальне меню надто широке. Контакти розташувалися далеко один від одного. Для використання інформації з сайдбара і зовсім доведеться скролл екран, а це не всім подобається. Проблему можна вирішити, використовуючи адаптивний і мобільний дизайн з CSS3 Media Queries. З допомогою медиазапросов ми розбудовуємо розташування контенту Тепер все працює так: вгорі – блок з вертикальним навігаційним меню; під ним – блок з контактами, які тепер теж розміщуються вертикально; контент сайдбара відображається не збоку від вмісту тега , а НАД ним. Це найпростіший приклад того, що можна зробити за допомогою Responsive Web Design Media Queries. Насправді можливостей значно більше.

Так що ж таке медиазапросы?

Під терміном CSS Media Queries розуміють модуль CSS3 з допомогою якого можна змусити контент сторінки адаптуватися до певних умов. Наприклад, він починає реагувати на розмір екрана, або на орієнтацію пристрою (книжкова/альбомна). Як система розуміє, що потрібно змінювати контент? Для цього використовуються медиазапросы. В них зазначаються певні параметри. Якщо пристрій, з якого відвідувач зайшов на сайт, відповідає цим параметрам, включаються заздалегідь прописані стилі. Їх можна писати як в загальній таблиці CSS, так і в окремому файлі.

Сумісність CSS Media Queries з браузерами

Всі сучасні браузери підтримують цю техніку, від Safari до Chrome. Звичайно, у користувачів старих версій Internet Explorer виникнуть проблеми Але давайте визнаємо чесно – у тих, хто досі користується старими IE, буквально все може викликати проблеми.

Синтаксис адаптивної верстки Media Queries

Можливо, ви вже стикалися з медиазапросами, коли підключали файл стилів в html. Пам'ятайте цей рядок? Іноді в кінець додавався ще один параметр, який виглядав так: media='screen'. Це і є медиазапрос! Він означає, що зазначений стильовий файл буде працювати на оснащених екраном пристроях. Замість screen можна вказати print – в такому разі стилі з файлу застосовуються, якщо сторінка виводиться на друк. Можна використовувати наступні атрибути: all – універсальний варіант, який використовується за промовчанням, застосовується у всіх випадках; scrteen – екрани (комп'ютери, ноутбуки, планшети, смартфони і все, що оснащений дисплеєм); print – принтери; projection – проектори; speech – мовні браузери; braille – для пристроїв для слабозорих; tv – для екранів телевізорів. Це не все. Є кілька додаткових атрибутів CSS Media Queries , але вони використовуються рідко. До того ж, можна взагалі не вказувати параметр за замовчуванням включиться all.

Структура медиазапроса

Замість створення стильового файлу можна використовувати код css. Він виглядає так: @media screen and (max-width: 1024px) { (тут будуть стилі } Після директиви @media, яка дає зрозуміти, що буде використовуватись медиазапрос, йде вказівка типу пристрою ( screen – екран) та додаткові параметри. У зазначеному прикладі застосовується властивість CSS Media Queries Max Width. Це означає, що зазначені у фігурних дужках стилі будуть задіяні, якщо розмір екрану пристрою користувача не перевищує 1024 px. Screen і and не обов'язкові. Ви можете написати так:
@media (max-width: 1024px) {} У такому разі властивості будуть використовуватися на будь-яких пристроях, а не тільки на тих, що оснащені екраном.

Зазначення декількох параметрів

Припустимо, ви хочете дещо обмежити коло пристроїв, на яких будуть застосовуватися стиль. Скажімо, ви бажаєте демонструвати властивості тільки тим, хто відвідує ваш сайт зі смартфона, розмір екрану якого не менше 320 px, але не більше 500 px. У такому разі запит приймає наступний вигляд: @media (min-width: 320px) and (max-width: 500px) {} Якщо ви знайомі з програмуванням, nj знаєте, для чого застосовується оператор and. Для тих, хто не в курсі: він перевіряє, чи є істинними обидві умови. Тобто для активації властивостей у запиті екран повинен бути не менше 320 та не більше 500 пікселів. Кількість операторів and не обмежується одним. Ви можете ставити їх рівно стільки, скільки захочете. Наприклад, спробуйте створити певні розміри для екранів смартфонів і зовсім інші – для телевізорів. Важливий момент – орієнтація пристрої користувача. Хтось переглядає сайти зі смартфона з портретної орієнтації, хтось- з ландшафтною. Для перших знадобиться додаткова умова orientation:portrait, для других, відповідно, orientation:landscape. Ці рядки теж вказуються в дужках після команди @media. Можна розділяти за допомогою and. Ще один цікавий нюанс. Замість and ви цілком можете використовувати оператор or. Йому потрібно, щоб хоч одна умова в запиті було істинним! Наприклад: @media (max-width: 500px) or (orientation:portrait ) {} Якщо екран менше 500 px ЧИ використовується портретна орієнтація, стилі в фігурних дужках почнуть діяти.

Ключове слово not для більш тонкої настройки

У медиазапрос можна вставити слово not. Це робиться так: @media (not max-width:700px) {} Властивості активуються, якщо максимальна ширина не дорівнює 700 пикселів.

Медиафункции

У запитах може використовуватися кілька заздалегідь створених функцій. Ознайомитися з усіма ви можете на сайті W3C. Більшості верстальників достатньо володіти трьома головними: orientation (про нього ми вже говорили); width (ширина, її теж згадували); height (висота). Висота використовується рідко, але є декілька випадків, в яких ця настройка може стати в нагоді.

Як і де розміщувати запити?

Багато верстальники чомусь поміщають їх в самий кінець файлу стилів. Наприклад, спочатку перераховуються основні стилі, а потім, в нижній частині документа, розташовуються запити. Це не дуже добре. Набагато зручніше розміщувати властивості для різних пристроїв прямо після основних стилів. Наприклад, у вас є div, якому задано червоний колір шрифту: div { color: red; } Відразу після нього вказуємо запит: @media (min-width: 320px) {} Прописуємо властивості. Такий підхід буде громіздким, якщо використовується «чистий» css. На допомогу приходять препроцессоры. У них є чимало цікавих можливостей для більш осмисленого застосування запитів. Ще один варіант – розміщення властивостей для різних пристроїв у різних стильових файлах. Це особливо зручно, якщо ви використовуєте директиву import препроцесорів. У результаті виходить зручний для редагування, чистий код. Який варіант використовувати? Все залежить від особистих переваг і особливостей роботи команди. Можливо, в місці вашої роботи вже буде прийнятий певний спосіб розміщення медиазапросов. Також не забувайте, що ви можете полегшити собі життя за допомогою новітніх програмних засобів. Мова йде не тільки про препроцессорах. З допомогою Gulp Group CSS Media Queries можна зробити процес набагато зручніше. Рекомендуємо освоїти цей інструмент або який-небудь із його аналогів.