Адаптивный и мобильный дизайн с CSS3 Media Queries / Хабр

Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.

Для начала посмотрим это в действии.

Пред началом посмотрите на

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

Другие примеры

Если вы хотите увидеть больше примеров, посмотрите следующие темы для

, которые я сделал используя media queries:

,

,

и

.

Обзор

Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Для проверки ширины используются media queries, если ширина меньше чем 980px, в этом случае макет становится резиновым, вместо фиксированной ширины. Если ширина меньше 650px, то контейнеры с контентом и боковой панелью расширяются на полный экран и становятся в одну колонку.

HTML

Не будем останавливаться на подробном описании HTML. Ниже описана основная структура макета. У меня есть «pagewrap», который включает в себя «header», «content», «sidebar» и «footer».

<div>
<header>
<hgroup>
<h2>Demo</h2>
<h3>Site Description</h3>
</hgroup>
<nav>
<ul>
<li><a href=»#»>Home</a></li>
</ul>
</nav>
<form>
<input type=»search»>
</form>
</header>
<div>
<article>
blog post
</article>
</div>
<aside>
<section>
widget
</section>

</aside>
<footer>
footer
</footer>
</div>

HTML5. js

Обратите внимание, что в демо используется HTML5. Internet Explorer ниже 9-й версии не поддерживает новые элементы содержащиеся в HTML5, такие как , , , и прочие. Поэтому подключаем Javascript файл

в HTML документ, который позволит IE понимать новые элементы.

<!—[if lt IE 9]>
<script src=»http://html5shim.googlecode.com/svn/trunk/html5.js»></script>
<![endif]—>

CSS

Сбрасываем HTML5 элементы в block

Следующий CSS сделает HTML5 элементы (article, aside, figure, header, footer, etc.) блочными.

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}

Описываем основную структуру в CSS

Я снова не буду вдаваться в подробности. Основной контейнер «pagewrap» имеет ширину 980px. «Header» имеет фиксированную высоту 160px. Контейнер «content» шириной 600px и прижат влево. «Sidebar» шириной 280px и прижат вправо.

#pagewrap {
width: 980px;
margin: 0 auto;
}
#header {
height: 160px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 280px;
float: right;
}
#footer {
clear: both;
}

Шаг 1

На первом шаге в

не реализованы media queries, поэтому при изменении размера окна браузера, макет будет оставаться фиксированной ширины.

CSS3 Media Queries

Теперь начинается самое интересное –

.

Подключаем Media Queries Javascript

Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Вы можете включить ее, добавив Javascript файл

.

<!—[if lt IE 9]>
<script src=»http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js»></script>
<![endif]—>

Подключаем CSS media queries

Создаем новый CSS файл для media queries.

.

<link href=»media-queries.css» rel=»stylesheet» type=»text/css»>

Размер экрана меньше 980px (резиновый макет)

Для размера экрана меньше 980px применим следующие правила:

• pagewrap = ширина 95%;
• content = ширина 60%;
• sidebar = ширина 30%.

используйте проценты (%), чтобы сделать блоки резиновыми.

@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
}
#content {
width: 60%;
padding: 3% 4%;
}
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}

Размер экрана меньше 650px (одноколоночный макет)

Затем, задаем CSS правила для размера экрана меньше 650px.

• header = сбрасываем высоту в auto;
• searchform = позиционируем — 5px сверху;
• main-nav = сбрасываем позиционирование в static;
• site-logo = сбрасываем позиционирование в static;
• site-description = сбрасываем позиционирование в static;
• content = устанавливаем ширину auto (это растянет контейнер на всю ширину)
• sidebar = устанавливаем ширину 100% и убираем float.

@media screen and (max-width: 650px) {
#header {
height: auto;
}
#searchform {
position: absolute;
top: 5px;
right: 0;
}
#main-nav {
position: static;
}
#site-logo {
margin: 15px 100px 5px 0;
position: static;
}
#site-description {
margin: 0 0 15px;
position: static;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
#sidebar {
width: 100%;
float: none;
margin: 0;
}
}

Размер экрана меньше 480px

Этот CSS будет применяться для размеря экрана меньше 480px, которая соответствует ширине iPhone в альбомной ориентации.

• html = отключаем регулировку размера шрифта. По умолчанию iPhone увеличивает размер шрифта, для более комфортного чтения. Вы можете это отключить добавив -webkit-text-size-adjust: none;
• main-nav = сбрасываем размер шрифта до 90%.

@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}

Эластичные изображения

Для того, чтобы сделать изображения эластичными, просто добавьте

и

. Изображения

и

работает в IE7, но не работает в IE8 (да, еще один странный баг). Для исправления нужно добавить

для IE8.

img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}

Эластичные встраиваемые видео

Для видео применяем те же правила, как для изображений. По непонятным причинам

(для видео) не работает в Safari. Нужно использовать

.

.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}

Initial Scale Meta Tag (iPhone)

По умолчанию iPhone Safari сжимает станицы, что бы вместить в экран. Следующий мета-тег говорит iPhone Safari использовать ширину устройства как ширину окна и отключить.

<meta name=»viewport» content=»width=device-width; initial-scale=1. 0″>

Финальное Демо

Откроем финальное демо и поизменяем размер экрана, что бы увидеть media queries в действии. Не забудьте проверить в iPhone, iPad, Blackberry (последние версии) и Android телефонах, что бы увидеть мобильную версию.

@media — Веб-технологии для разработчиков

Описание

At-правило @media в CSS связывает набор операторов, ограниченных фигурными скобками, в CSS блок, применяется при соблюдении условия одного или нескольких медиазапросов.

В JavaScript, at-правило @media может быть получено с помощью CSSMediaRule, интерфейса объектной модели CSS.

Синтаксис

At-правило @media можно разместить не только на верхнем уровне CSS, но и внутри любого фрагмента условной группы-правил.

/* На верхнем уровне кода */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Вложено в другое условное at-правило */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}
 

Для рассмотрения синтаксиса медиазапросов, см. Использование медиазапросов.

Формальный синтаксис

@media <media-query-list> {
  <group-rule-body>
}
где 
<media-query-list> = <media-query>#
где 
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
где 
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>
 
где 
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>
где 
<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
где 
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>
где 
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

A <media-query> is composed of a optional media type and/or a number of media features.

all

Подходит для всех устройств.

print

Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.

screen

Предназначен в первую очередь для цветных компьютерных экранов.

speech

Предназначен для синтезаторов речи.

Each media feature tests for one specific feature of the browser or device.

Имя	Summary	Notes
width	Viewport width
height	Viewport height
aspect-ratio	Width-to-height aspect ratio of the viewport
orientation	Orientation of the viewport
resolution	Pixel density of the output device
scan	Scanning process of the output device
grid	Is the device a grid or bitmap?
update-frequency	How quickly (if at all) can the output device modify the appearance of the content	Added in Media Queries Level 4
overflow-block	How does the output device handle content that overflows the viewport along the block axis?	Added in Media Queries Level 4
overflow-inline	Can content that overflows the viewport along the inline axis be scrolled?	Added in Media Queries Level 4
color	Number of bits per color component of the output device, or zero if the device isn’t color.
color-index	Number of entries in the output device’s color lookup table, or zero if the device does not use such a table.
display-mode	The display mode of the application, as specified in the web app manifest’s display member.	Defined in the Web App Manifest spec.
monochrome	Bits per pixel in the output device’s monochrome frame buffer, or 0 if the device is not monochrome.
inverted-colors	Is the user agent or underlying OS inverting colors?	Added in Media Queries Level 4
pointer	Is the primary input mechanism a pointing device, and if so, how accurate is it?	Added in Media Queries Level 4
hover	Does the primary input mechanism allow the user to hover over elements?	Added in Media Queries Level 4
any-pointer	Is any available input mechanism a pointing device, and if so, how accurate is it?	Added in Media Queries Level 4
any-hover	Does any available input mechanism allow the user to hover over elements?	Added in Media Queries Level 4
light-level	Current ambient light level	Added in Media Queries Level 4
scripting	Is scripting (e. g. JavaScript) available?	Added in Media Queries Level 4
device-width	Width of the rendering surface of the output device	Deprecated in Media Queries Level 4
device-height	Height of the rendering surface of the output device	Deprecated in Media Queries Level 4
device-aspect-ratio	Width-to-height aspect ratio of the output device	Deprecated in Media Queries Level 4
-webkit-device-pixel-ratio	Number of physical device pixels per CSS pixel	Nonstandard; WebKit/Blink-specific. If possible, use the resolution media feature instead.
-webkit-transform-3d	Are CSS 3D transforms supported?	Nonstandard; WebKit/Blink-specific
-webkit-transform-2d	Are CSS 2D transforms supported?	Nonstandard; WebKit-specific
-webkit-transition	Are CSS transitions supported?	Nonstandard; WebKit-specific
-webkit-animation	Are CSS animations supported?	Nonstandard; WebKit-specific

Примеры

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1. 2 }
}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4 }
}

Спецификации

Совместимость с браузерами

Особенность	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Базовая поддержка (all, print, screen)	1. 0	1.0 (1.7)	(Да)	9.0	3.1
speech	Нет	Нет	Нет	9.0	Нет
Media features	1.0	1.0 (1.7)	(Да)	9.0	3.1
display-mode media feature	?	(Да)	?	?	?

Смотрите также

Использование CSS-медиазапросов для создания динамичных веб-сайтов

Единый дизайн для экранов всех размеров

Джефф Бэйл
Опубликовано 26.06.2013

С каждым днем на рынок выходит все больше телефонов и планшетов. Потребители используют разнообразные устройств всевозможных размеров и форм, однако это ставит перед разработчиками веб-сайтов сложные проблемы: Как сделать так, чтобы веб-сайт выглядел хорошо не только в традиционных браузерах, но и в браузерах мобильных и планшетных устройств? Как предоставить пользователям первоклассные возможности для всего разнообразия размеров экрана? Ответ — применить динамичный дизайн. Динамичный дизайн меняется в соответствии с размерами экрана, на который осуществляется отображение. Основной способ реализации динамичного дизайна — использование технологии CSS media queries (CSS-медиазапросы).

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

Предварительные условия

Примеры программного кода в этой статье предназначены для исполнения в веб-браузерах, которые поддерживают технологию CSS media queries, в том числе в браузерах Mozilla Firefox, Apple Safari, Google Chrome и Opera. В разделе Ресурсы приведена ссылка на полный список браузеров для ПК и мобильных устройств, поддерживающих технологию CSS3 media queries.

Динамичный дизайн

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

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

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

Поддержка различных носителей для вывода информации была реализована в CSS посредством медиатипов начиная с версии CSS2. Если вы когда-либо делали таблицу стилей для печати, то уже использовали медиатипы. Соответствующий пример показан в листинге 1.

Листинг 1. Использование медиатипов

<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />

В листинге 1 атрибут media задает таблицу стилей, которые следует использовать для каждого типа носителя информации:

• Стиль screen предназначен для экранов цветных компьютерных мониторов.
• Стиль print предназначен для контента, который демонстрируется в режиме предварительного просмотра или печатается на принтере.

Медиазапросы, введенные в спецификации CSS3 (CSS version 3), расширяют функции медиатипов и допускают применение в таблицах стилей более точных правил отображения. Медиазапрос (Media query)— это выражение, которое может иметь значение True (истина) или False (ложь). В случае значения True содержащиеся в этом выражении стили будут использоваться, в случае значения False — не будут. Эта простая логика — которая благодаря использованию выражений приобретает весьма мощные возможности — обеспечивает разработчику дополнительную гибкость благодаря применению специальных правил отображения для сценариев конкретного дизайна.

Медиазапрос состоит из одного медиатипа, за которым следуют одно или несколько выражений, проверяющих определенное условие, например, минимальную ширину экрана. Внутри таблицы стилей правило медиазапроса выглядит следующим образом (см. пример в листинге 2).

Листинг 2. Правило медиазапроса

@media all and (min-width: 800px) { ... }

Согласно разметке в листинге 2, для всех медиатипов (экран, печать и т. д.), у которых минимальная ширина экрана по горизонтали составляет 800 пикселей, используются следующие CSS-правила. Эти правила будут применяться в тех местах примера, где находится многоточие. В данном медиазапросе:

• @media all— медиатип, который в данном случае диктует применение данного CSS-кода ко всем медиатипам.
• (min-width:800px)— выражение, содержащее медиазапрос, который дает указание браузеру применять следующий CSS-код только в том случае, если минимальная ширина экрана этого браузера составляет 800 пикселей.

Обратите внимание, что в листинге 2 ключевые слова all и and могут быть пропущены. Если медиазапрос применяется ко всем медиатипам, то слово all может быть пропущено. Завершающее слово and также является необязательным. После переписывания этого медиазапроса с использованием краткого синтаксиса он будет выглядеть следующим образом (см. листинг 3).

Листинг 3. Краткий синтаксис

@media (min-width:800px) { ... }

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

Листинг 4. Сложное выражение

@media (min-width:800px) and (max-width:1200px) { ... }

В своем выражении вы можете использовать любое количество условий and. К примеру, если вы хотите добавить другое условие, осуществляющее проверку портретной ориентации экрана, вам достаточно добавить еще одно ключевое слово and (и), за которым будет следовать дополнительный медиазапрос orientation (см. листинг 5).

Листинг 5. Использование ключевого слова and

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

Медиазапрос в листинге 5 активируется только в том случае, если минимальная ширина составляет 800 пикселей, максимальная ширина составляет 1200 пикселей, а ориентация является портретной (обычно ориентация имеет смысл только для смартфонов и планшетов, которые несложно повернуть из портретного режима в альбомный и наоборот). Если какое-либо из этих условий будет иметь значение False, то данное правило медиазапроса не будет применено.

Антонимом ключевого слова and является ключевое слово or (или). Подобно слову and, оно группирует условия в сложное выраже. Выражение с ключевым словом or, разделяющим два условия, будет иметь значение True, если хотя бы одно из этих условий имеет значение True (см. листинг 6).

Листинг 6. Ключевое слово or

@media (min-width:800px) or (orientation:portrait) { ... }

Данное правило будет применено в том случае, если ширина будет не менее 800 пикселей или если ориентация будет портретной.

Еще одним полезным ключевым словом медиазапросов в вашем арсенале является слово not. Будучи помещенным в начало медиазапроса, слово not инвертирует результат. Другими словами, если без ключевого слова not какой-либо запрос имел значение True, то теперь он будет иметь значение False. Соответствующий пример показан в листинге 7.

Листинг 7. Использование ключевого слова not

@media (not min-width:800px) { ... }

Код в листинге 7 означает, что если минимальная ширина не равна 800 пикселям, то применяются следующие правила CSS. В приведенных примерах в качестве единицы измерения в медиазапросе используют только пиксели, однако вы не ограничены лишь пикселями. Вы можете использовать любую допустимую в CSS единицу измерения, в т. ч. сантиметры (см), дюймы (в), миллиметры (мм) и т. д.

Имеется несколько медиафункций, в том числе width, color и grid, которые можно использовать в медиазапросах. В данной статье не описываются все возможные медиафункции. Полный список этих функций содержится в документации организации World Wide Web Consortium (W3C) по медиазапросам (см. раздел Ресурсы).

Для проектирования динамичных веб-сайтов достаточно знать лишь несколько медиафункций: orientation (ориентация), width (ширина) и height (высота). Orientation – это простая медиафункция, которая может иметь значение portrait или landscape. Эти значения соответствуют положению телефона или планшета в руке пользователя, что позволяет разработчику оптимизировать контент для обоих вышеуказанных формфакторов. Считается, что экран находится в портретном режиме, если высота превышает длину, и в альбомном режиме, если ширина больше высоты. В листинге 8 показан пример использования функции orientation.

Листинг 8. Медиазапрос с функцией orientation

@media (orientation:portrait) { ... }

Функции height и width ведут себя аналогично; обе допускают использование префиксов min- и max-. В листинге 9 показан правильно построенный медиазапрос с использованием этих функций.

Листинг 9. Медиазапрос с функциями height и width

@media (min-width:800px) and (min-height:400px) { ... }

Медиафункции width и height можно использовать без префикса min- или max- (см. листинг 10).

Листинг 10. Медиафункции без префиксов min- и max-

@media (width:800px) and (height:400px) { ... }

Медиазапрос в листинге 10 соответствует ситуации, когда экран имеет ширину ровно 800 пикселей и высоту ровно 400 пикселей. В реальном мире этот медиазапрос, вероятно, окажется слишком конкретным, чтобы быть полезным. По всей вероятности, подавляющее большинство посетителей веб-сайтов никогда не встретятся со сценарием, ориентированным на точные размеры экрана. Как правило, в динамичном дизайне при определении параметров экрана указываются диапазоны размеров.

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

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

Медиазапрос для смартфона в альбомном режиме: @media (min-width: 321px) { ... }

Медиазапрос для смартфона в портретном режиме: @media (max-width: 320px) { ... }

Медиазапрос для Apple iPad в альбомном режиме: @media (orientation: landscape) { ... }

Медиазапрос для iPad в альбомном режиме: @media (orientation: portrait) { ... }

Обратите внимание на использование медиафункции orientation для iPad и на использование медиафункции width для Apple iPhone. Это объясняется следующим обстоятельством. К сожалению, iPhone не поддерживает медиафункцию orientation. Для имитации определения ориентации необходимо использовать функцию width. Для получения дополнительной информации о наиболее употребительных медиазапросах обратитесь к разделу Ресурсы.

Поддержка технологии SASS (Syntactically Awesome Style Sheets) встроена в инфраструктуру Ruby on Rails, что способствует популярности SASS и ее все более широкому распространению в сообществе веб-разработчиков. Детальное рассмотрение SASS выходит за рамки данной статьи, я лишь изложу основы использования медиазапросов в таблицах стилей на базе SASS. Для получения дополнительной информации о SASS обратитесь к разделу Ресурсы.

Медиазапросы в SASS-коде ведут себя точно так же, как в обычном CSS-коде, с одним исключением: они могут быть вложены в другие CSS-правила. Если медиазапрос вложен в другое CSS-правило, он помещает это правило в верхний уровень таблицы стилей (см. листинг 11).

Листинг 11. Вложенный медиазапрос

#header {
  width: 400px;
  @media (min-width: 800px) {
    width: 100%;
  }
}

В результате компиляции примера в листинге 11 получится код, показанный в листинге 12.

Листинг 12. Результат компиляции

#header {
  width: 400px;
}
@media (min-width: 800px) {
  #header {
    width: 100%;
  }
}

Теперь, когда вы знаете, как писать медиазапросы, пришло время подумать об их развертывании в базе вашего CSS-кода — логичным и организованным образом. Принятие решения о том, как организовать медиазапросы, в значительной степени является вопросом личных предпочтений. В данном разделе рассматриваются преимущества и недостатки двух основных подходов.

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

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

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

Поддержка веб-браузерами

К настоящему времени вы, вероятно, уже убедились в том, что CSS-медиазапросы являются отличным инструментом, и вас интересует, какие браузеры поддерживают этот инструмент. Здесь есть и хорошие, и плохие новости.

• Хорошая новость состоит в том, что большинство современных браузеров (включая браузеры для смартфонов) поддерживает CSS-медиазапросы.
• Плохая новость состоит в том, что в Microsoft Windows® Internet Explorer® версии 8 поддержка медиазапросов все еще отсутствует.

С точки зрения большинства профессиональных веб-разработчиков это означает, что для поддержки медиазапросов в Internet Explorer м необходимо специальное решение. Ниже описывается одно из таких решений под названием respond.js, которое представляет собой т.н. polyfill-скрипт на базе JavaScript.

Реализация polyfill-скрипта с помощью respond.js

Respond.js — это небольшая JavaScript-библиотека, которая расширяет возможности веб-браузеров и поддерживает CSS-медиазапросы в тех браузерах, где отсутствует их нативная поддержка. Polyfill-скрипт циклически проходит по всему CSS-коду, на который ссылается данная страница, и анализирует CSS-правила, использующие медиазапросы. Затем этот скрипт отслеживает изменения ширины в браузере, добавляя и удаляя стили в соответствии с CSS-медиазапросом. Тем самым обеспечивается работа CSS-медиазапросов в браузерах, не имеющих их встроенной поддержки.

Это решение базируется на JavaScript, поэтому для работы polyfill-скрипта в браузере должна быть активирована технология JavaScript. Этот скрипт предназначен лишь для поддержки медиазапросов, в которых фигурируют минимальные или максимальные значения width, что требуется для создания динамичных дизайнов. Он не обеспечивает полномасштабной замены всех возможных CSS-медиазапросов. За дополнительной информацией о функциях и ограничениях этого скрипта обратитесь к разделу Ресурсы.

Respond.js — это один из множества доступных polyfill-скриптов с открытым исходным кодом для поддержки медиазапросов. Если respond.js не удовлетворяет ваши потребности, будет несложно найти альтернативные варианты.

Заключение

С помощью CSS-медиазапросов вы можете с легкостью адаптировать свои разработки к экранам разных размеров и предоставлять пользователям надлежащие возможности вне зависимости от того, какие браузеры или какие устройства они используют для посещения вашего веб-сайта. Эта технология лежит в основе динамичного дизайна — перспективной практики веб-дизайна и разработки для мобильных устройств. Попытка использования медиазапросов на вашем веб-сайте не требует никаких серьезных затрат, кроме простого совершенствования существующих CSS-файлов, так что почему бы не попробовать? Посетители вашего веб-сайта, просматривающие его с помощью планшетов, телефонов и устройств для чтения электронных книг, будут вам благодарны.

Ресурсы для скачивания

Похожие темы

как использовать медиа-запросы — учебник CSS

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

Идея адаптивного дизайна — предоставить посетителям сайт в наиболее читаемой и привлекательной форме. Дизайн создается под как минимум три целевых экрана: настольный ПК, планшет и смартфон. Но учитывая большое количество вариаций этих девайсов, недостаточно остановиться на какой-то одной ширине для каждого типа устройства. Поэтому важно использовать гибкую сетку и проводить тестирование в процессе разработки, отслеживая то, как подстраивается дизайн сайта под разную ширину браузерного окна.

Когда использовать медиа-запросы?

Как правило, для адаптации дизайна веб-страницы необходимо прописать ряд CSS-стилей для определенных элементов. Ниже мы перечислим наиболее частые сценарии, когда вам понадобится обратиться к медиа-запросам.

• Определение количества колонок. Трехколоночный макет сайта, который шикарно смотрится на настольных ПК, будет совсем неуместен для мобильных телефонов и планшетов. С помощью медиа-запросов можно переопределить количество колонок в макете с учетом ширины экрана устройства, сгруппировав для смартфонов весь контент в одну колонку.
• Относительная ширина. Когда вы устанавливаете фиксированную ширину макета, скажем, в 960 пикселей, это подойдет для настольных компьютеров, лэптопов и некоторых особо крупных планшетов. Однако для мобильного телефона такой размер контейнера слишком большой. Используя медиа-запрос, можно специально для смартфонов создать «резиновый» макет, ширина которого будет не фиксированной, а относительной. Таким образом, контейнер шириной 100% будет легко подстраиваться под любой смартфон в любой ориентации.
• Уменьшение отступов. Большие расстояния между блоками и элементами создают ощущение воздушного, легкого дизайна. Однако отступы, которые хорошо смотрятся на мониторе с диагональю 21-27 дюймов, будут выглядеть абсолютно безобразно на небольшом экране смартфона, к тому же принуждая пользователей больше прокручивать страницу. Медиа-запросы позволяют задать альтернативные размеры отступов для узких дисплеев.
• Регулировка размера шрифта. Заголовки высотой в 60 пикселей могут красиво смотреться на десктопе, но для мобильных устройств такой размер шрифта редко когда уместен, поэтому для узких экранов будет целесообразным установить меньшее значение font-size.
• Адаптивная навигация. Нередко бывает так, что навигационное меню, которое было продумано для десктопной версии сайта, совершенно не подходит для мобильных устройств ввиду своей объемности либо манеры расположения пунктов меню. Существует несколько подходов к реализации удобной навигации для мобильной версии сайта, и медиа-запросы непременно принимают в этом участие.
• Скрытие элементов. Некоторые части веб-страницы могут быть бесполезными либо малозначимыми, если сайт просматривается с мобильного телефона. С помощью свойства display: none и медиа-запросов вы можете скрыть определенные элементы от глаз посетителя, если он зашел на сайт со смартфона. Но имейте в виду, что подобный прием не экономит трафик: скрытые элементы по-прежнему будут загружаться браузером.

Конечно, это далеко не все ситуации, когда применяются медиа-запросы.

Breakpoints (контрольные точки)

При помощи медиа-запросов вы можете создавать так называемые контрольные точки (англ. breakpoints) и привязывать к ним CSS-стили. К примеру, можно определить для браузера следующие правила: «Если ширина экрана составляет больше чем 767 пикселей, к веб-странице применяются эти стили, а если ширина экрана составляет больше чем 991 пиксель, применяются другие стили». Вот эти числа, обозначающие ширину экрана, и называются контрольными точками.

Какую ширину необходимо указывать в контрольных точках? Наиболее простой ответ: ту, на которой верстка веб-страницы начинает ломаться. Представим, что у вас есть сайт с контейнером шириной 1180 пикселей. Тогда в окне шириной 1200 пикселей (учитываем полосу прокрутки) или меньше он, скорее всего, будет выглядеть не очень хорошо. Вот и ваша первая контрольная точка: необходимо внести правки в дизайн, если сайт просматривается в окне шириной менее чем 1200 пикселей.

При создании гибких сеток часто применяется определенный набор медиа-запросов, предусмотренный для трех различных контрольных точек: смартфон, планшет, монитор ПК. Контрольных точек может быть и больше. Например, в Bootstrap 4 используется четыре контрольных точки в одном направлении и еще четыре — в обратном направлении:

/* ------------------------------------------ */
/* ----- От маленьких экранов к большим ----- */
/* ------------------------------------------ */

/* Стили для очень маленьких экранов (телефоны в книжной ориентации,
дисплей менее 576 пикселей). Записываются без медиа-запросов,
поскольку в Bootstrap это значение по умолчанию */

/* Стили для маленьких экранов (телефоны в альбомной ориентации,
дисплей 576 пикселей и более) */
@media (min-width: 576px) { ... }

/* Стили для средних экранов (планшеты, дисплей 768 пикселей и более) */
@media (min-width: 768px) { ... }

/* Стили для больших экранов (ПК, дисплей 992 пикселей и более) */
@media (min-width: 992px) { ... }

/* Стили для очень больших экранов (ПК с большим монитором,
дисплей 1200 пикселей и более) */
@media (min-width: 1200px) { ... }

/* ------------------------------------------ */
/*------ От больших экранов к маленьким ------*/
/* ------------------------------------------ */

/* Стили для очень больших экранов (дисплей 1200 пикселей и более).
Записываются без медиа-запросов, так как контрольная точка
для очень больших экранов не имеет верхней границы по ширине */

/* Стили для больших экранов (дисплей максимум 1199 пикселей) */
@media (max-width: 1199px) { ... }

/* Стили для средних экранов (дисплей максимум 991 пикселей) */
@media (max-width: 991px) { ... }

/* Стили для маленьких экранов (дисплей максимум 767 пикселей) */
@media (max-width: 767px) { ... }

/* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */
@media (max-width: 575px) { ... }

Кроме этого, в Bootstrap задействуются еще несколько вариаций контрольных точек для записи стилей под конкретный диапазон ширины экранов. При этом используются сразу оба условия — для минимума и для максимума:

/* Стили для очень маленьких экранов (дисплей максимум 575 пикселей) */
@media (max-width: 575px) { ... }

/* Стили для маленьких экранов (дисплей шириной от 576 пикселей до 767 пикселей) */
@media (min-width: 576px) and (max-width: 767px) { ... }


/* Стили для средних экранов (дисплей шириной от 768 пикселей до 991 пикселей) */
@media (min-width: 768px) and (max-width: 991px) { ... }


/* Стили для больших экранов (дисплей шириной от 992 пикселей до 1199 пикселей) */
@media (min-width: 992px) and (max-width: 1199px) { ... }


/* Стили для очень больших экранов (дисплей минимум 1200 пикселей) */
@media (min-width: 1200px) { ... }

Mobile First или Desktop First?

Когда вы пишете стили для контрольных точек, вы не создаете весь дизайн с нуля, а лишь корректируете существующую верстку. Возникает вопрос, под что верстать изначально: под настольные компьютеры с последующей корректировкой под мобильные устройства или же наоборот — сначала создать версию для небольших экранов, а затем расширить ее? Рассмотрим оба подхода.

• Desktop First. При этом подходе вы сначала полностью верстаете дизайн для больших экранов, без использования медиа-запросов. После этого, используя контрольные точки в медиа-запросах, корректируете дизайн под средние и маленькие экраны (уменьшаете шрифт, перестраиваете макет, скрываете второстепенные элементы и т. п.). Преимущество такой верстки заключается в том, что старые браузеры (к примеру, Internet Explorer 8), которые не знают, что такое медиа-запросы, смогут отобразить ваш сайт, поскольку это исходный дизайн, который вы писали без использования директивы @media.
• Mobile First. Если вы выбираете данный подход, то сначала верстаете дизайн для самых маленьких экранов, не используя медиа-запросы. После этого, создавая контрольные точки, вы корректируете верстку под все более и более широкие экраны.

Оба подхода подразумевают сначала создание определенного базового набора стилей, актуальных для любой версии сайта (например, цвет ссылок, размер основного шрифта и др.), а затем написание тех стилей, которые будут отличаться для различных экранов.

Синтаксис медиа-запросов

Чтобы добавить медиа-запрос в таблицу стилей, запишите следующее:

@media (min-width: 576px) {
	/* здесь будут CSS-стили */
}

Внутрь скобок медиа-запроса поместите стили CSS, как вы делаете это обычно:

@media (min-width: 576px) {
	.column {
		width: 100%;
	}
	h2 {
		font-size: 24px;
	}
	/* и так далее... */
}

Желательно размещать все медиа-запросы под обычными стилями, а не над ними. Если вы используете контрольные точки, отталкиваясь от минимальной ширины экрана (min-width), размещайте их в порядке возрастания ширины экрана. Если вы применяете max-width, тогда расположите медиа-запросы в порядке уменьшения ширины. В противном случае одни медиа-запросы будут перезатирать предыдущие.

Далее в учебнике: принцип создания гибкой сетки в CSS.

Медиа типы в CSS

Стили могут относиться к различным типам медиа. Например, можно создать отдельный стиль для страницы, которая будет просматриваться в браузере, и другой стиль для печати страницы. Вы можете определять тип медиа в теге <link> для внешней таблицы стилей и внутри тега <style> для внедряемых таблиц стилей.

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen">

<style type="text/css" media="all">

/* rules */

</style>

Когда тип медиа неопределен, стили относятся ко всем медиа. Медиа типы могут принимать следующие значения:

• all – стили для всех типов медиа
• aural – для синтезаторов речи
• braille – для устройств чтения символов Брайля
• embossed – для устройств печати символов Брайля
• handheld – для портативных устройств
• print – для печати на принтере
• projection – для демонстрации с помощью проекторов
• screen – для показа на экране монитора
• tty – для показа на терминалах и телетайпах
• tv – для показа на экране ТВ

Код ниже демонстрирует как применить CSS для дизайна различных медиа:

Пример кода

	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Media</title>
<style type="text/css" media="screen">
	.warning {color:#ff0000}
	h2.warning {text-decoration:underline}
	p.warning {font-weight:bold}
	.printDisplay {display:none}
	</style>
	<style type="text/css" media="print">
	.warning {color:#660000;}
	h2.warning {text-decoration:underline; font-size:1in;}
	p.warning {font-weight:bold; font-size:.5in;}
	.screenDisplay {display:none}
</style>
</head>
<body>
	<h2>WARNING</h2>
	<p>Don't go there!</p>
	<p>This is the print version.</p>
	<p>This is the screen version.</p>
</body>
</html>
	

Указанный выше CSS-файл может быть прикреплен к любому количеству HTML-страниц. Тег <link>, расположенный в секции head каждой веб-страницы, может использоваться для прикрепления внешней каскадной таблицы стилей к любой странице вашего сайта.

Пример кода

	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<h2>WARNING</h2>
	<p>Don't go there!</p>
</body>
</html>
	

Атрибуты <link>

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

Встроенные стили

	
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline Styles</title>
</head>
<body>
	<p>Common Greetings</p>
	<ul>
	<li>Hello</li>
	<li>Hi</li>
	<li>Howdy</li>
</ul>
	

Основы адаптивной верстки. Медиа-запросы.

В этой статье мы расскажем про такой механизм, как media-запросы. Который позволяет создавать более гибкие, другими словами адаптивные сайты.

Адаптивность

В первую очередь хотелось бы сказать, что такое адаптивность. Мы не будем приводить определения из википедии или ещё откуда-то, а скажем своими словами.

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

На изображении приведен пример отображения такого сайта.

Медиа-запросы

Вернёмся к CSS и собственно самим media-запросам. Этот механизм является такое конструкцией, который позволяет задавать стили только для устройств с определенными параметрами.

Например можно задавать стили для устройств по их максимальной/минимальной ширине/высоте. Очевидно, что у телефонов эти параметры куда меньше, чем у компьютеров или планшетов. Таким образом медиа-запросы являются одним из механизмов для создания адаптивных сайтов. Отмечу, что это лишь один из механизмов.

Все медиа-запросы начинаются с @media, после чего идут условия проверки и в фигурных скобках CSS-стили, пример:

@media screen and (max-height: 600px){
/* CSS-стили */
}

Как видите появились так же неизвестные значения, после @media. Далее мы приведем перечень и описание этих условий.

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

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

По мимо этого в медиа-запросах могут использоваться логические операторы.

Логические операторы:

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³ цветов каждый, что в общем составляет 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-код */
} 

CSS @media Правило

Пример

Измените цвет фона элемента на «голубой», когда ширина окна браузера не превышает 600 пикселей:

только экран @media и (max-width: 600px) {
body {
background-color: lightblue;
}
}

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Правило @media используется в медиа-запросах для применения разных стилей для разных типов / устройств медиа.

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

• ширина и высота области просмотра
• ширина и высота устройства
Ориентация
• (в альбомной или книжной ориентации планшет / телефон?)
• разрешение

Использование медиазапросов — популярный метод предоставления индивидуального стиля лист (адаптивный веб-дизайн) для настольных компьютеров, ноутбуков, планшетов и мобильных телефонов.

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

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

Поддержка браузера

Числа в таблице указывают первую версию браузера, полностью поддерживающую правило @media.

Синтаксис CSS

@media not | только mediatype и (mediafeature и | или | не mediafeature) {
CSS-код;
}

значение , а не , только и и ключевые слова:

not: Ключевое слово not меняет значение всего медиа запрос.

только : Единственное ключевое слово запрещает старым браузерам, которые не поддерживают медиа-запросы с медиа-функциями, применять указанные стили. Не влияет на современные браузеры.

и: Ключевое слово and объединяет мультимедийную функцию с мультимедийной тип или другие медиа-функции.

Все они необязательны. Однако, если вы используете , а не или только , необходимо также указать тип носителя.

У вас также могут быть разные таблицы стилей для разных носителей, например это:

….

Типы носителей

Функции мультимедиа

Другие примеры

Пример

Скрыть элемент, когда ширина браузера составляет 600 пикселей или меньше:

@media screen и (max-width: 600 пикселей) {
div.пример дисплея {
: никто;
}
}

Пример

Используйте медиа-запросы, чтобы установить цвет фона на бледно-лиловый, если область просмотра 800 пикселей в ширину или шире, до светло-зеленого, если ширина области просмотра составляет от 400 до 799 пикселей. Если размер области просмотра меньше 400 пикселей, цвет фона будет светло-синим:

@media screen и (min-width: 400 пикселей) {
body {
цвет фона: светло-зеленый;
}
}

@media экран и (min-width: 800px) {
body {
цвет фона: бледно-лиловый;
}
}

Пример

Создать адаптивное меню навигации (отображаемое горизонтально на больших экранах и вертикально на маленьких экранах):

@media screen и (max-width: 600 пикселей) {
.topnav а {
float: нет;
ширина: 100%;
}
}

Пример

Используйте медиа-запросы для создания адаптивного макета столбца:

/ * На экранах шириной 600 пикселей или меньше сделайте столбцы друг на друга, а не рядом друг с другом * /
@media screen и (max-width: 600 пикселей) {
.столбец {
ширина: 100%;
}
}

Пример

Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентация браузера. У вас может быть набор свойств CSS, который будет только применяется, когда ширина окна браузера превышает его высоту, так называемый «ландшафтный» ориентация.

Используйте светло-голубой цвет фона, если ориентация в альбомном режиме:

@media только экран и (ориентация: пейзаж) {
кузов {
цвет фона: светло-голубой;
}
}

Пример

Используйте медиа-запросы, чтобы установить зеленый цвет текста, когда документ отображается на экране, и черным при печати:

@media print {
body {
цвет: черный;
}
}

Пример

Список, разделенный запятыми : добавьте дополнительный медиа-запрос к уже существующему, используя запятую (это будет действовать как оператор ИЛИ):

/ * Если ширина составляет от 600 до 900 пикселей ИЛИ больше 1100 пикселей — измените внешний вид экрана

@media screen и (max-width: 800px) {
    #шапка сайта {
        дисплей: нет;
    }
} 

 .container {
    максимальная ширина: 955 пикселей;
}
.content {
    ширина: 65%;
}
.sidebar {
    ширина: 30%;
} 

 / * Для браузеров / экранов с шириной менее 768 пикселей * /
@media screen и (max-width: 768 пикселей) {
    .container {
        максимальная ширина: 100%;
    }
    .content {
        ширина: 100%;
    }
    .sidebar {
        ширина: 100%;
    }
} 

  @import url (myfile.css) экран;
@import url (myfile-print.css) print;  

  @import url (myfile.css) экран, печать;  

  @import url (myfile.css) экран и (максимальная ширина: 800 пикселей);  

  @import url (myfile.css) экран и (соотношение сторон: 4/3);  

  @import url (myfile.css) экран и (минимальное разрешение: 100 точек на дюйм);  

  @import url (myfile.css) экран, печать;  

  @import url (myfile.css) не экран;  

  @media screen and (max-width: 800px) {
  / * вводим CSS * /
}  

  @media screen and (max-width: 800px) and (min-width: 600px) and (Ориентация: альбомная) {
  / * вводим CSS * /
}