Среда26 сентября
Интернет

Как вставить запросы media? CSS - адаптивность в три шага

2 января 2018

Медиазапросы были введены в спецификации CSS3, решив старую головную боль всех web-разработчиков: нативное управление стилями CSS, в зависимости от технических характеристик конкретного устройства, и плавное изменение стилей при изменении размера окна браузера.

Медиазапросы в CSS: адаптив за 5 минут

Простыми словами, медиазапрос — это конструкция, позволяющая, в зависимости от определенных условий, выбирать, какие стили использовать на странице. Например, если ширина окна браузера больше 1024px, мы показываем полное меню, растягивающееся на всю ширину страницы, а если меньше 1024px — скрываем его (например, используя свойство display: none;) и показываем вместо него кнопку "бургер-меню", при клике по которой раскрывается изящный список (display: block;)

media css

Итак, самый простой media CSS запрос будет выглядеть следующим образом:

.menu { display: block; }
.burger-menu { display: none; }

@media all and (max-width: 1024px) {

.menu { display: none; }
.burger-menu { display: block; }

}

Дословно можно прочитать так: мы всегда показываем стандартное меню и скрываем «бургер-меню», но, если ширина окна браузера меньше 1024 пикселей (max-width: 1024px означает «до максимальной ширины в 1024px»), то мы скрываем старое меню и показываем новое. Свойства в медиазапросе перебьют действующие. Это сработает как при открытии страницы с мобильного телефона или планшета, так и при плавном уменьшении окна браузера, если мы свернем его в окошко, ухватимся за одну из сторон и потянем, уменьшая его размер.

Примерно так запрос может выглядеть в вашем редакторе:

media cssЕсли вам достаточно краткого обзора медиазапросов в CSS, то вы можете смело попрактиковаться и проверить их действие на собственном сайте, установив на него CSS media queries. Мобильные устройства также легко распознают ваши новые стили, если вы не забудете указать мета-тег viewport, который мы далее рассмотрим подробнее. Однако мы рекомендуем подробнее ознакомиться с их свойствами, узнать о браузерной поддержке, рассмотреть техники mobile first и desktop first.

Поддержка медиазапросов

Пожалуй, этот вопрос является ключевым для тех, кто всерьез думает о посетителях своего сайта и стремится сделать его максимально доступным для всех. К счастью, медиазапросы поддерживаются уже достаточно хорошо и отлично работают в современных браузерах, начиная с самых проблемных Safari 4 и Internet Explorer 9. Если уж вам приходится поддерживать Internet Explorer 8, то можно подключить к странице популярный скрипт respond.js или css3-mediaqueries.js.
media css

Видео по теме

Устанавливаем правильные media CSS для мобильных

Для того, чтобы все работало, как нужно, важно не забыть установить в заголовке <head> документа тег viewport. Это делается следующим образом:

<meta name="viewport" content="width=device-width, initial-scale=1">

Таким образом, на экранах мобильных устройств с высокой плотностью пикселей будет устанавливаться корректное соотношение между указанным в CSS и реальным количеством пикселей, и ваш сайт будет масштабироваться. И больше не возникнет вопрос, почему не работает media при зуминге CSS.

Изящная адаптивность

Основная задача медиазапросов — сделать сайт адаптивным, то есть «научить» его автоматически приспосабливаться под любые форматы и размеры экранов. Это можно сделать двумя способами.

Обозначить media CSS-запросами некие ключевые точки, под которыми чаще всего подразумеваются популярные форматы устройств. Например, самый простой вариант: 320px - телефоны, 768px - планшеты, 1024px и выше — ноутбуки и персональные компьютеры. И на каждой из этих точек менять фиксированные размеры блоков (а также и любых других объектов, таких как видео или изображения).

Второй способ — сделать плавный, «резиновый» переход между несколькими точками, задав элементам страницы не жесткие размеры в пикселях, а размеры в процентах. В таком случае, например, на 1024px и выше блок меню будет занимать 50% страницы, плавно уменьшаться вместе с размером окна браузера до 768px, а после - растягиваться на все 100% окна просмотра.

media css

Также стоит упомянуть про техники mobile first и desktop first, отличающиеся подходом в построении запросов. В первом случае мы сначала описываем правила для всех устройств, включая ноутбуки и персональные компьютеры, а после постепенно перестраиваем сайт и убираем лишние элементы страницы. Во втором — сначала готовим верстку сайта под мобильные устройства, затем при расширении окна браузера и появлении свободного места размещаем в них оставшийся контент.

Хитрость от мастера: указываем media css — правила в теге link!

Немногие знают, но необязательно писать запросы непосредственно в стилях CSS, можно указать их прямо при подключении файла, непосредственно в теге <link>. Файл будет подключаться в зависимости от того, соответствует ли страница критериям, обозначенным в свойстве media. Аналогичным способом можно воспользоваться и при импортировании стилей из других файлов при помощи @import.

В заключение стоит отметить, что многие популярные библиотеки, используемые при разработке сайтов, содержат в себе встроенные аналоги медиазапросов. Пренебрегать ими не стоит. Например, Bootstrap позволяет прописывать в HTML-коде классы, благодаря которым блоки будут автоматически адаптироваться при изменении размера экрана, но вы не сможете гибко контролировать этот процесс, а сайт всегда будет жестко разбит на 12 колонок. Ведь только с их помощью можно создать сайт, который будет максимально гибко адаптироваться к любым устройствам, находясь при этом полностью под вашим контролем.

Источник: fb.ru
Похожие материалы
Как вставить текст с помощью клавиатуры в программе «Ворд» Компьютеры
Как вставить текст с помощью клавиатуры в программе «Ворд»

Каждый, кто набирает или редактирует текст в программе «Ворд», стремится увеличить скорость работы, найти такие алгоритмы, которые бы позволили как можно меньше концентрироваться на технических деталях и к...

Простые Способы, Как Вставить Картинку В Ворд,как Заработать В Интернете Бизнес
Простые Способы, Как Вставить Картинку В Ворд,как Заработать В Интернете

Вопрос о возможности заработка в интернете занимает людей. Это и естественно, поскольку теперь уже некоторые понимают, как заработать в виртуальной паутине, и могут делиться своими познаниями с большим количеством жел...

Как вставить деревянные окна в деревянном доме своими руками Домашний уют
Как вставить деревянные окна в деревянном доме своими руками

Для дачного бревенчатого домика идеальным вариантом станут деревянные окна. Этот выбор под силу только истинному ценителю стиля и качества. Ведь только природные материалы позволят вкусить полноценный отдых. Деревянны...

Как вставать в очередь в детский сад, чтобы не ждать годами? Закон
Как вставать в очередь в детский сад, чтобы не ждать годами?

Проблема отсутствия мест в детских садиках остро стоит на территории всей нашей страны. Не исключением является и столица. Очередь в детский сад в Москве может достигать огромных размеров. Это зависит в основном от то...

Как вставить в HTML iframe: пример использования Интернет
Как вставить в HTML iframe: пример использования

На заре сайтостроения веб-ресурсы широко использовали фреймы для отображения отдельных частей страниц. Но с приходом новой версии HTML 5 всё изменилось. Элементы разметки , и

Как вставить картинку в Интернет
Как вставить картинку в "Одноклассниках" для незабываемого общения

Для более яркого и интересного общения на многих интернет-порталах и в социальных сетях можно использовать графические изображения (смайлики) и вставлять картинки. «Одноклассники» своим пользователям предл...

Как удалить аккаунт Google в три простых шага Интернет
Как удалить аккаунт Google в три простых шага

В наше время высоких информационных технологий существует так много различных почтовых служб, что порой боишься запутаться в сетях Всемирной паутины, что в лучшем случае сулит ощущение дискомфорта при управлении привы...

Как вставить картинки в презентацию? Фон и анимация Компьютеры
Как вставить картинки в презентацию? Фон и анимация

Начиная со школьной скамьи всем приходится знакомиться со множеством программ для создания презентации. С помощью этого инструмента можно заметно облегчить многие виды работ. Давайте вспомним, где и когда она применяе...

Как вставить песню в песню: методы и инструкции Компьютеры
Как вставить песню в песню: методы и инструкции

Порою, работая с мультимедийными программами, появляется необходимость налаживания одной дорожки звука на другую, или же замена в видеофрагменте исходной аудиодорожки на ту, которая необходима вам. Благо, в наше время...

Как в HTML вставить изображение графическое, фоновое. Как вставить изображение в HTML с компьютера, по центру, в таблицу Компьютеры
Как в HTML вставить изображение графическое, фоновое. Как вставить изображение в HTML с компьютера, по центру, в таблицу

Визуальная часть является одной из самых важных при работе с сайтами. Конечно, функционалу она уступает, но и скидывать со счетов её не следует. Давайте поговорим о том, как с компьютера на свой сайт установить изобра...