Запрос media – медиазапросы внутри класса или классы внутри медиазапроса? — Хабр Q&A

Список популярных медиазапросов | Провёрстка

Очень часто при создании сайтов при верстке адаптивных макетов приходится под рукой всегда иметь список быстродоступных правил (т.н. медиа-запросов) для стандартного набора расширений экранов мониторов. Для каждой контрольной точки (breakpoint) можно задать свои css-правила, на основании которых  для того или иного разрешения будут применяться индивидуальные стили.

 

adapt

 

Этот список приведен ниже, пользуйтесь на здоровье!

@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. Далее мы приведем перечень и описание этих условий.

В первую очередь после определения медиа-запроса нужно задать тип устройства, для которых применять его:

Табл. 1. Устройства и их описание
ТипОписание
all Все типы. Это значение используется по умолчанию.
braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed Принтеры, использующие для печати систему Брайля.
handheld Смартфоны и аналогичные им аппараты.
print Принтеры и другие печатающие устройства.
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 означает, что красный, зелёный и синий канал могут отображать 23 цветов каждый, что в общем составляет 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, пока они не убедятся, что их подписчики используют браузеры, которые поддерживают эти технологии.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *