Список популярных медиазапросов | Провёрстка
Очень часто при создании сайтов при верстке адаптивных макетов приходится под рукой всегда иметь список быстродоступных правил (т.н. медиа-запросов) для стандартного набора расширений экранов мониторов. Для каждой контрольной точки (breakpoint) можно задать свои css-правила, на основании которых для того или иного разрешения будут применяться индивидуальные стили.
Этот список приведен ниже, пользуйтесь на здоровье!
@media only screen and (max-width : 1920px) { /* CSS правила */ } @media only screen and (max-width : 1680px) {} @media only screen and (max-width : 1366px) {} @media only screen and (max-width : 1280px) {} @media only screen and (max-width : 1024px) {} @media only screen and (max-width : 800px) {} @media only screen and (max-width : 768px) {} @media only screen and (max-width : 600px) {} @media only screen and (max-width : 533px) {} @media only screen and (max-width : 360px) {} @media only screen and (max-width : 320px) {} @media only screen and (max-width : 240px) {} @media only screen and (max-width : 176px) {}
Также с помощью определенных правил css можно распознавать альбомное или портретное расположение экрана в случае, если сайт просматривается с планшета или смартфона:
@media all and (orientation: landscape) {
/* CSS правила для устройства в альбомном режиме */
}
@media all and (orientation: portrait) {
/* CSS правила для устройства в портретном режиме */
}
И напоследок: кто не знает как работает адаптивный шаблон, то на примере страницы Google можно увидеть ее работу. Для этого уменьшайте размер окна браузера и следите за тем как меняются положения блоков, исчезают изображения, во что превращается меню по мере уменьшения окна браузера.
Можно сочетать резиновость сайта с медиазапросами, делая его при этом резиновым в определенных пределах окна, а переходя на более низкие разрешения изменять поведение страницы сайта на какое-либо другое. Это позволяет увеличить еще больше эффективность отображения информации и оптимизируя сайт таким образом позволяет привлечь и удерживать на нем еще больше посетителей.
Метки: breakpoints, cssОсновы адаптивной верстки. Медиа-запросы.
В этой статье мы расскажем про такой механизм, как media-запросы. Который позволяет создавать более гибкие, другими словами адаптивные сайты.
Адаптивность
В первую очередь хотелось бы сказать, что такое адаптивность. Мы не будем приводить определения из википедии или ещё откуда-то, а скажем своими словами.
По нашим скромным представлением адаптивная страница — такая страница, которая подстраивается под разный тип устроит. Что обозначает, что на компьютерах она выглядит одним образом, на планшетах другим и иначе выглядит на телефонах. Для этого, как правило, дизайнер рисует несколько макетов, под каждый тип устройства.
На изображении приведен пример отображения такого сайта.
Медиа-запросы
Вернёмся к CSS и собственно самим media-запросам. Этот механизм является такое конструкцией, который позволяет задавать стили только для устройств с определенными параметрами.
Например можно задавать стили для устройств по их максимальной/минимальной ширине/высоте. Очевидно, что у телефонов эти параметры куда меньше, чем у компьютеров или планшетов. Таким образом медиа-запросы являются одним из механизмов для создания адаптивных сайтов. Отмечу, что это лишь один из механизмов.
Все медиа-запросы начинаются с @media, после чего идут условия проверки и в фигурных скобках CSS-стили, пример:
@media screen and (max-height: 600px){
/* CSS-стили */
} Как видите появились так же неизвестные значения, после @media. Далее мы приведем перечень и описание этих условий.
В первую очередь после определения медиа-запроса нужно задать тип устройства, для которых применять его:
| Тип | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию. |
| braille | Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми. |
| embossed | Принтеры, использующие для печати систему Брайля. |
| handheld | Смартфоны и аналогичные им аппараты. |
| Принтеры и другие печатающие устройства. | |
| projection | Проекторы. |
| screen | Экран монитора. |
| speech | |
| tty | Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея). |
| tv | Телевизоры. |
Само по себе указание типа устройства является логической переменной. В первом примере мы как раз указали, что запрос должен выполняться для всех экранов мониторов.
По мимо этого в медиа-запросах могут использоваться логические операторы.
Логические операторы:
and
Логическое И. Объединяет несколько условий, которые должны выполняться одновременно.
В первом примере как раз используется этот оператор.
not
Логическое отрицание(НЕ). Соответственно инвертирует одно из условий.
Пример, для всех типов устройств, кроме смартфонов:
@media all and (not handheld){
/* CSS-стили */
} Следует запомнить, что операторы имеют свой порядок применения и отрицание имеет самый низкий приоритет, поэтому скобочки указываются не просто так, они повышают приоритет — то, что выполняется в скобочках имеет наивысший приоритет.
,
Запятая служит для обозначения логического ИЛИ. Запрос срабатывает если выполняется хотя бы одно из указанных через запятую условий.
Пример, для телевизоров или проекторов:
@media tv, projection{
/* CSS-стили */
}only
Этот оператор ничего из себя не представляет и применяется лишь для того, чтобы медиа-запросы поддерживались старыми браузерами.
Нужно ставить перед каждым условием, если их несколько, объединенных через запятую, то для каждого.
Пример, для мониторов или смартфонов:
@media only screen, only handheld{
/* CSS-стили */
}По мимо выше указанных условий можно использовать медиа функции.
Media-функции:
Они задают технические характеристики устройства, на котором смотрят сайт. Почти все такие функции имеют приставки min- и max-, которые соответствуют минимальному и максимальному значению для характеристики. Например min-height:200, говорит о том, что бы стиль применялся к устройствам с высотой равной/более 200 px. А max-height:200, для устройств с равной/меньшей высотой 200 пикселям.
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.
Значение — целое число/целое число.
Определяет соотношение ширины к высоте устройства. Значение задается в виде двух целых чисел, разделяемых слешем.
color (min-color, max-color)
Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.
Значение — целое число.
Определяет число бит на канал цвета. К примеру, значение 3 означает, что красный, зелёный и синий канал могут отображать 2 3 цветов каждый, что в общем составляет 512 цветов (8×8×8). Если значение не указано, тогда проверяется что устройство цветное.
color-index (min-color-index, max-color-index)
Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.
Значение — целое число.
Определяет количество цветов, которые должно поддерживать устройство.
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.
Значение — целое число/целое число.
Определяет соотношение сторон экрана устройства. Отличается от aspect-ratio тем, что применяется относительно самого устройства а не видимой части.
device-height (min-device-height, max-device-height)
Типы устройств, к котором применяется — все кроме speech.
Значение — размер.
Определяет размер доступной высоты или печатной страницы. Задается числом, которое определяет количество пикселей.
device-width (min-device-width, max-device-width)
Типы устройств, к котором применяется — все кроме speech.
Значение — размер.
Определяет размер доступной ширины или печатной страницы. Задается числом, которое определяет количество пикселей.
grid
Типы устройств, к котором применяется — all.
Значение — нет.
Определяет, что это устройство с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.
height (min-height, max-height)
Типы устройств, к котором применяется — все кроме speech.
Значение — размер.
Высота отображаемой области.
monochrome (min-monochrome, max-monochrome)
Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.
Значение — целое число.
Определяет, что устройство монохромное. Если указано число, то оно обозначает число бит на пиксель. Так, значение 8 равнозначно 256 оттенкам серого (или другого цвета). В примере 6 показан стиль для монохромного и цветного принтера.
orientation
Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.
Значение — landscape | portrait.
Определяет, что устройство находится в альбомном режиме (ширина больше высоты) или портретном (ширина меньше высоты).
resolution (min-resolution, max-resolution)
Типы устройств, к котором применяется — handheld, print, projection, screen, tty, tv.
Значение — разрешение в dpi (точек на дюйм) или dpcm (точек на сантиметр).
Определяет разрешение устройства, например, принтера. В примере 8 стиль будет работать для принтера с минимальным разрешением 300 точек на дюйм.
scan
Типы устройств, к котором применяется — tv.
Значение — interlace | progressive.
Определяет тип развертки телевизора — чересстрочная (interlace) или прогрессивная (progressive). При чересстрочной развёртке телевизор вначале показывает нечётные строки кадра, затем чётные, что позволяет сократить передаваемые данные. В прогрессивной развёртке кадр передаётся и показывается целиком.
width (min-width, max-width)
Типы устройств, к котором применяется — все кроме speech.
Значение — размер.
Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.
Самые распространенные медиа-запросы
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* CSS-код */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* CSS-код */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* CSS-код */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* CSS-код */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* CSS-код */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* CSS-код */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* CSS-код */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* CSS-код */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* CSS-код */
}
/* BlackBerry Torch -------- */
@media screen and (max-device-width: 480px) {
/* CSS-код */
}
/* Samsung GALAXY Tab -------- */
@media (max-device-width: 1024px) and (orientation: landscape) {
//css code here
}
/* Dell Streak 7 --------- */
@media (max-device-width: 800px) {
/* CSS-код */
}
/* Motorola's Xoom -------- */
@media (max-device-width: 1280px) {
/* CSS-код */
}
/* Samsung GALAXY Tab -------- */
@media (max-device-width: 1024px) and (orientation: landscape) {
/* CSS-код */
} Адаптируем сайты с помощью медиа-запросов @media
Задача
Сделать адаптивную версию сайта под все устройства и под все разрешения. Сайт имеет одну версию, которая видоизменяется в зависимости от разрешения экрана.
Это вариант, не предусматривающий отдельный мобильный сайт. Вся работа ведется с одним основным сайтом. С помощью медиа-запросов можно выполнить совершенно различные версии одного и того же сайта для просмотра на настольном компьютере и смартфоне. Сложность метода в том, что нужно предусмотреть все возможные разрешения экрана, устройства и ориентацию устройств (горизонтальная, вертикальная).
Решение
Подключаем разные таблицы стилей CSS для разных разрешений экрана. Разрешения экрана ловим медиа-запросами @media.
Конструкция (пример)
@media screen and (min-device-width: 1600px) {
ваши стили CSS для этого разрешения
}
Теперь нужно просто указать все разрешения и предусмотреть возможные устройства для корректного отображения вашего сайта. Будем указывать возможные разрешения диапазонами, к примеру от 1024px до 1280px. Мы не затронем того, какие логические операторы используются в медиа-запросах. Подробная информация про них здесь.
Планшеты вертикально:
@media screen
and (orientation: portrait) and (device-width:768px) {
ваши стили CSS для этого разрешения
}
Телефоны вертикально:
@media screen
and (orientation: portrait) and (min-device-width : 320px) and (max-device-width : 700px) {
ваши стили CSS для этого разрешения
}
Планшеты горизонтально:
@media screen
and (min-width: 768px) and (max-width: 1024px)
ваши стили CSS для этого разрешения
}
Телефоны горизонтально:
@media screen
(max-width:640px) and (orientation:landscape)
ваши стили CSS для этого разрешения
}
Дипазон разрешения экрана:
@media screen
and (min-width:1024px) and (max-width:1279px)
ваши стили CSS для этого разрешения
}
Дипазон разрешения экрана:
@media screen
and (min-width:1280px) and (max-width:1365px)
ваши стили CSS для этого разрешения
}
Дипазон разрешения экрана:
@media screen
and (min-width:1366px) and (max-width:1439px)
ваши стили CSS для этого разрешения
}
Дипазон разрешения экрана:
@media screen
and (min-width:1440px) and (max-width:1599px)
ваши стили CSS для этого разрешения
}
Дипазон разрешения экрана:
@media screen
and (min-width:1600px) and (max-width:1919px)
ваши стили CSS для этого разрешения
}
Дипазон разрешения экрана:
@media screen
and (min-width:1920px) and (max-width:2559px)
ваши стили CSS для этого разрешения
}
Дипазон разрешения экрана:
@media screen
and (device-width:2560px)
ваши стили CSS для этого разрешения
}
Эти медиа-запросы позволяют перекрыть почти все устройства, что сегодня существуют. Появляется экзотика с разрешением в 4K и 5K. С ними нужно экспериментировать отдельно.
Как подключить медиа запросы? — Хабр Q&A
Подскажите пожалуйста, есть шаблон на Joomla3Хочу сделать его адаптивным
Подключаю медиа-запросы а они не работают (в head добавил meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1″ /> и подключил css media файл)
Подскажите как правильно это сделать
Код
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/conversetlite/css/tdefaut.css" type="text/css" media="all" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/conversetlite/css/box.css" type="text/css" media="all" />
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/superfish.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/hoverIntent.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/nivo.slider.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/scroll.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/mootools.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/script.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/conversetlite/css/media.css" type="text/css" media="max-width: 700px" />
<link rel="icon" type="image/gif" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.gif" />
<link href='http://fonts.googleapis.com/css?family=Oswald:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<link rel="stylesheet" href="media.css" media="max-width: 700px"/>
<link rel="stylesheet" href="media.css" media="only screen and (max-width: 700px)"/>
<link rel="stylesheet" href="/templates/first-template/css/ddsmoothmenu.css" />
<script type="text/javascript" src="/templates/first-template/js/jquery.min.js"></script>
<script type="text/javascript" src="/templates/first-template/js/ddsmoothmenu.js"></script>за и против / Pechkin.com corporate blog / Habr
Дизайнеры, работающие над созданием привлекательных шаблонов писем для email-рассылок, много времени тратят на то, чтобы добиться адекватного отображения на разных устройствах. В наши дни почти половина всех писем просматривается со смартфонов и планшетов, а значит, необходимо позаботиться о том, чтобы письмо хорошо выглядело на разных форм-факторах. Именно для этого в вёрстке и начали использовать media queries.
Однако, прежде чем погрузиться в мир веб-дизайна и вёрстки уникальных email-кампаний, следует поподробнее взглянуть на media queries, как на инструмент, который имеет свои плюсы и минусы.
Что такое media query
Media query — это компонент языка CSS. Этот компонент часто используется в качестве «переключателя», который на основе набора правила отвечает за выбор тех или иных стилей оформления.
Media query состоит из трех частей: тип среды (‘media’), выражение (‘expression’) и правила стилей, которые содержатся в самой media query.
Media type используется для объявления среды, к которой будут применяться правила. Существует четыре вариант: все, печать, экран, речь(all, print, screen и speech). Для задач email почти всегда используется тип screen.
Выражения (expressions) позволяют таргетировать устройства с помощью более узких условий. Выражения описывают свойства устройства, например ширину (witdh) и высоту экрана, соотношение сторон (aspect-ratio) и цвет. Часто дизайнеры используют следующие свойства:
max-иmin-width;max-иmin-device-width;device-pixel-ratio.
И, наконец, в фигурных скобках указываются CSS-правила, которые применяются, если письмо открывается на устройстве, соответствующем требованиям по типу среды и свойствам в выражении. Media queries пишутся в блоке стилей, который как правило расположен в заголовке html-шаблона.
Плюсы media queries
С помощью этого инструмента можно создавать письма, которые хорошо выглядят на разных устройствах в разных почтовых клиентов. Многие дизайнеры создают свои рассылки с применением подхода desktop first — используются таблицы фиксированной ширины, и все оптимизируется таким образом, чтобы письмо хорошо выглядело на десктопе.
В таком случае при открытии письма на мобильном устройстве возможны проблемы: почтовый клиент «зумит» письмо, в результате чего кнопки и текст становятся очень маленькими и нечитаемыми, а чтобы увидеть левую часть письма необходимо прибегнуть к горизонтальной прокрутке.
Без media queries у дизайнеров было не так много возможностей повлиять на эту ситуацию, но все изменилось.
Небольшой пример
Как известно, шаблоны с фиксированной шириной обычно масштабируются в почтовых клиентах, что может приводить к уменьшению текста до степени полной нечитабельности. В то же время «жидкий» шаблон с процентными ширинами позволяют гибко отображать контент на устройствах с разными экранами.
Теперь предположим, что у нас есть таблица-контейнер (подробнее о них мы писали ранее) с фиксированной шириной в 600 пикселей. В рассматриваемом сценарии требуется переключиться с фиксированной ширины в 600 пикселей при просмотре на десктопе к «жидкой» процентной (100%) ширине при открытии письма на мобильном устройстве:
<table border="0" cellpadding="0" cellspacing="0" >
Как видно к таблице был добавлен атрибут
class — достичь желаемого эффекта можно с помощью использования классов для обозначения HTML-элементов и media queries для работы с этими классами. Каждый класс должен иметь имя, в примере он назван .containter-table. Взаимодействие с классом осуществляется с помощью метода выбора атрибутов:/* Обычный метод из веб-дизайна */
table.container-table {}
/* Метод выбора атрибутов */
table[class="container-table"] {}
После добавления класса в таблицу в тег
HTML-кода нужно дописать соответствующую media query, содержащую выражение и название класса. Выражение max-width:600px говорит media query о том, что применять правила нужно, если размер экрана устройства меньше 600 пикселей в ширину.@media screen and (max-width:600px) {
table[class="container-table"] {
}
}
Теперь следует добавить правила стилей для подстройки значения ширины таблицы в CSS. Следующий код делает таблицу-контейнер «жидкой» , если размер области отображения контента меньше 600 пикселей:@media screen and (max-width:600px) {
table[class="container-table"] {
width: 100% !important;
}
}
Этот же подход может быть использован, чтобы обойти традиционные проблемы с размером изображений, текста и кнопок. Например, если нужно добиться «подстройки» размера шрифта в зависимости от ширины экрана мобильного устройства, сделать это можно способом, аналогичным описанному выше:@media screen and (max-width:600px) {
td[class="mobile-text"] {
font-size: 18px !important;
}
}
Важно отметить, что чаще всего media queries используются для того, чтобы заменять inline-стили. При этом CSS рендерится каскадом — то есть стили применяются по очереди, а media query располагаются в самом верху HTML-кода документа. Это приводит к тому, что у inline-стилей естественным образом возникает приоритет, который нужно каким-то образом отменить.Для этого используется декларация !important:
td { font-size: 24px !important; font-weight: bold !important; }
Многие веб-дизайнеры недолюбливают !important, но при вёрстке писем — это незаменимый инструмент.Сложное таргетирование
Несмотря на то, что в большинстве случаев media queries применяются для работы со стилями на мобильных устройствах, их можно применять и для более широкого круга задач.Существует множество техник кодирования и дизайна, которые просто не работают в различных почтовых клиентах. Вещи вроде SVG, CSS-анимаций и видео просто восхитительны, когда работают как положено, но могут просто уничтожить все впечатления от чтения письма, если с ними что-то будет не так.
Поэтому один из главнейших плюсов media queries заключается в том, что они могут быть использованы для таргетинга почтовых клиентов или платформ и прогрессивной адаптации контента под них.
Например, большинство email-клиентов не поддерживают фоновые видео в email, а с помощью media query можно «нацелиться» на те, что могут отображать такие письма. Фоновые видео поддерживают лишь некоторые Webkit-клиенты, например Apple Mail и Outlook 2011 для Mac. С помощью media query можно сделать так, чтобы эти клиенты проигрывали фоновое видео, а остальные почтовые программы просто показывали изображение на фоне:
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Insert styles here */
}
Похожие выражения можно использовать для таргетирования целых наборов устройств, в зависимости от их функциональности. Например, если нужно нацелиться на новый iPhone 6 Plus в стандартном формате, то хорошо подойдет такой код:@media screen and (max-device-width: 414px) and (max-device-height: 776px) {
/* Insert styles here */
}
Не все так хорошо: поддержка
К большому сожалению media queries работают далеко не везде. Например, один из популярнейших в мире почтовых клиентов Gmail ни в браузере ни в мобильных приложениях не поддерживает эту технологию — почтовая программа просто отрезает секцию шаблона с , где как раз и располагаются все стили и media queries.В тусовке профессионалов email-маркетинга постоянно циркулируют слухи о том, что Google может пересмотреть свою политику в отношении CSS в электронной почте, но пока никаких реальных новостей по этому поводу нет, и дизайнерам приходится заниматься изучением вопроса о том, какие клиенты поддерживают media queries, а какие нет. Эта таблица может помочь с данным вопросом:
Именно проблемы с поддержкой media queries влечет за собой необходимость создания шаблонов рассылок с помощью HTML и инлайн-стилей и использовании media queries только в качестве «приправы», позволяющей прогрессивно улучшать дизайн. Компаниям не следует использовать CSS и media query, пока они не убедятся, что их подписчики используют браузеры, которые поддерживают эти технологии.