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

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

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

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


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

Поява CSS Media Queries

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

Потім виникли CSS3 Media Queries. З їх допомогою з 'явилася проста можливість реалізації динамічного дизайну.

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

Цей термін використовується, якщо вигляд ресурсу змінюється відповідно до розмірів екрану, на якому його переглядають. Як це зрозуміти? Все просто.

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

Це "класична" схема розташування компонентів. Вона чудово підходить для персонального комп 'ютера, але не дуже зручна для мобільних телефонів. Горизонтальне меню занадто широке. Контакти розташувалися далеко один від одного. Для використання інформації з сайдбару і зовсім доведеться скролити екран, а це не всім подобається.


Проблему можна вирішити, використовуючи адаптивний і мобільний дизайн з CSS3 Media Queries. За допомогою медіазапросів ми перебудовуємо розташування контенту... Тепер все працює так:

  • вгорі - блок з вертикальним навігаційним меню;
  • під ним - блок з контактами, які тепер теж розміщуються вертикально;
  • контент сайдбара не буде показано від вмісту теґу < main >, а НАД ним.

Це найпростіший приклад того, що можна зробити за допомогою Responsive Web Design Media Queries. Насправді можливостей куди більше.

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

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

Як система розуміє, що потрібно змінювати контент? Для цього використовуються медіазапроси. У них вказуються певні параметри. Якщо пристрій, з якого відвідувач зайшов на сайт, відповідає цим параметрам, включаються заздалегідь прописані стилі. Їх можна писати як у загальній таблиці CSS, так і в окремому файлі.

Сумісність CSS Media Queries з переглядачами

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

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

Можливо, ви вже стикалися з медіазапросами, коли підключали файл стилів в html. Пам 'ятайте цей рядок? < link rel = "stylesheet" type = "text/css" href = "style.css" > Іноді в кінець додавався ще один параметр, який виглядав так: 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. Це означає, що вказані у фігурних дужках стилі будуть задіяні, якщо розмір екрану пристрою користувача не перевищує 1024px. Screen і and не обов 'язкові. Ви можете написати так:

@media (max-width: 1024px) {}

У такому випадку властивості будуть використовуватися на будь-яких пристроях, а не тільки на тих, що оснащені екраном.

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

Припустимо, ви хочете обмежити коло пристроїв, на яких будуть застосовуватися вибрані стилі. Скажімо, ви бажаєте демонструвати властивості тільки тим, хто відвідує ваш сайт зі смартфона, розмір екрану якого не менше 320px, але не більше 500px. У такому випадку запит приймає наступний вигляд:

@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) {}


Якщо екран менше 500px АБО використовується портретна орієнтація, стилі у фігурних дужках почнуть діяти.

Ключове слово 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 можна зробити процес набагато зручнішим. Рекомендуємо освоїти цей інструмент або який-небудь з його аналогів.