Как уже известно из спецификации CSS, особый стиль оформления можно создавать для отдельного типа устройства. С выходом спецификаций версии CSS3 стало возможно еще корректировать оформление в зависимости от технических возможностей этих самых устройств. В качестве примера, можно вычислить девайс, у которого максимальное разрешение экрана 640 пикселей и составить для него отдельную таблицу стилей, а для прочих устройств можно с генерировать свое оформление. Кроме этого с легкостью можно определять такие показатели, как монохромность экрана, ориентации страниц при выводе и прочие полезные характеристики. Также стоит отметить, что все эти параметры можно кооперировать. Таким образом мы можем определить уникальный стиль для устройства, у которого определенное разрешение и ориентация страниц.
Полагаясь на все эти достоинства CSS3, стало возможным создавать адаптивные ресурсы, которые гармонично будут отображаться при любых условиях и определенных индивидуальных технических характеристах. Так, при уменьшении ширины окна браузера или экрана можно переопределять число колонок на сайте или размеры ключевых блоков, подгоняя их под нужные габариты.
Как правильно задавать?Ключевая характеристика медиа-запроса - это правило , с него необходимо начинать все запросы. После него указывают определенный тип устройства, для которого составляется оформление. За этим следует указание логического оператора и медиа-функции. Разновидность типов носителей, через которые может выводится информация, представлены ниже:
| Носитель | Пояснение |
| all | Соответствует всем возможным носителям. Это значения установлено по умолчанию |
| braille | Носитель, который работает по принципу Брайля. Такие устройства предназначены для людей, которые не видят. |
| embossed | Принтеры, которые осуществляют печать информации по принципу Брайля (предназначено для людей с ограниченным зрением). |
| handheld | Соответствует КПК и похожим устройствам. |
| Печатающие устройства. | |
| projection | Проектор. |
| screen | Монитор. |
| speech | Устройство, которое считывает информацию и преобразует ее в голосовой формат. В качестве примера выступает речевой браузер. |
| tty | Устройства, у которых прописан стандартный размер символов и дисплеев (к примеру, телетайп). |
| tv | Телевизор. |
Союз, который предназначен для объединения разных условий. Его логическое значение - "и" . Ниже представлен пример, который формирует стилевое оформление для цветных носителей.
@ media all and (color) { ... }
Частица, которая противоречит определенному условию или событию. В нижнем примере записан запрос на применение стиля ко всем существующим девайсам за исключением смартфонов
@ media all and (not handheld) { ... }
Стоит отметить, что данный оператор имеет не высокий приоритет считывания, поэтому он принимается во внимание системой в последний момент.
Применение этого оператора рассчитано на оптимизацию работы устаревших браузеров, которые могут не поддерживать медиа-запросы
@ media only all and (not handheld) { ... }
Логические операторы исключают присутствие элемента, который в логическом смысле выполнял бы функции "или" . Вместо этого применяются запятые. То есть в определенном наборе условий применение стилей будет осуществлено, если хотя бы одно из них подтвердится. Также следует отметить роль скобок в синтаксисе этих операторов, они предопределяют приоритет операции при считывании кода.
@ media all and (orientation: landscape) , all and (min- width: 480px) { ... }
Представленный пример определяет оформление для устройств с альбомной ориентацией страниц или для тех аппаратов, у которых минимальная ширина экрана 480 пикселей.
Медиа-функцииФункции осуществляют задачу по уточнению определенных технических характеристик при выводе документа. Принцип работы условия основывается на считывании истинного значения. Другими словами если программированное утверждение выполняется, то и стиль будет задействован.
Основываясь на практическом опыте можно сказать, что подавляющее большинство функций работают по принципам массивов с указанными пределами. То есть условие будет находиться на минимальном или максимальном значении определенного параметра. Для этого используются приставки min- и max- .
aspect-ratio (min-aspect-ratio, max-aspect-ratio)
Устанавливает приемлемое соотношение показателя высоты и ширины активной области устройства, где будет производится вывод содержимого веб-документа. Эта функция справедлива для таких носителей, как смартфон, принтер, проектор, экран и телевизор. Значение записываются в числовом формате. Разделителем между высотой и шириной служит обычный слеш (/).
color (min-color, max-color)
Эта функция подключает стилевое оформление в соответствии с цветовыми возможностями устройства, а именно количество бит на канал основного цвета. Для того, чтобы картина прояснилась, предлагаю рассмотреть простой пример. Предположим, что установленное значение наименьшей возможной цветовой гаммы является число 3. Это говорит о том, что устройство должно поддерживать 23 оттенков каждого из основного цвета. Просчитав все возможные комбинации цветов получим, что при таком значении, чтобы оформление применялось, нужно, чтобы устройство поддерживало как минимум 512 цветов. Ниже смотрим пример
@ media screen and (min- color: 3 ) { /* Минимум 512 цветов */ body { background: #ccc; } }
color-index (min-color-index, max-color-index)
Эта функция имеет сходство с предыдущей по принципу работы, но определяет она слегка другой параметр. Цель проверки - определить количество цветов, которое может воспроизвести устройство. Значением опять же выступает число, только теперь никаких вычислений - указываем сразу необходимый параметр. Такая функция часто используется для определения параметров смартфонов, принтеров, экранов и телевизионных устройств.
@ media all and (min- color- index: 256 ) { ... }
device-aspect-ratio (min-device-aspect-ratio, max-device-aspect-ratio)
Данная функция создана для определения соотношения экрана устройства, для которого составлялось оформление. Для этого достаточно указать два числа, которые соответствуют высоте и ширине экрана. Эти два значения должны разделятся между собой слешем (/). Ниже показан пример для девайсов с соотношением 16:9 и более
@ media screen and (min- device- aspect- ratio: 16 / 9 ) { ... }
device-height (min-device-height, max-device-height)
В этом случае речь идет о точном определении полной высоты устройства, на которое будет загружаться информация. Такая функция применяется во всех цифровых носителях за исключением устройств типа speech .
device-width (min-device-width, max-device-width)
Аналогично предыдущей функции, только этот оператор затрагивает значение ширины. В той же мере этой функцией пользуются во всех типах устройств, кроме речевых браузеров и похожих устройств. Ниже показан пример, согласно которому можно определить ширину страницы в зависимости от разрешения экрана:
< html> < head> < meta charset= "utf-8" > < title> device- width < style> div { padding: 10px; background: #e8bfad; margin: auto; } @ media screen and (min- device- width: 1600px) { div { width: 1500px; } } @ media screen and (device- width: 1280px) { div { width: 1100px; } } @ media screen and (device- width: 1024px) { div { width: 980px; } } < body> < div> Очень интересная информация для примера бла бла бла и тому подобное.
Сообщает системе, что данное устройство вывода распознает только один шрифт, не используя при этом параметры его высоты и интервалов между строк и букв. Такие устройства в наше время уже редкость, но иногда все-таки попадаются. К примеру, банковские терминалы. Для таких устройств характерно использование единиц em (если все таки пришлось прибегнуть к форматированию), как показано в примере
< html> < head> < meta charset= "utf-8" > < title> grid < style> @ media handheld and (grid) and (max- width: 15em) { body { font- size: 2em; } } < body> < p> Текст, который будет считываться с допотопного устройства.
height (min-height, max-height)
Работа функции очень похожа на CSS-свойство определения высоты элемента. В этом случае определяется высота активной зоны, которая захватывает определенный участок информации. Этот параметр зависит от высоты экрана устройства и не может привышать этот показатель, за исключением того случая, когда страница может масштабироваться.
monochrome (min-monochrome, max-monochrome)
Определяет показатель монохромности устройства. Это позволяет для черно-белого дисплея составить более простое в цветовом плане оформление. В качестве значения функции выступают обычные числа, которые сообщают нагрузку бит на 1 пиксель. Чтобы было более понятно, при укаании числа 8 будет осуществляться поиск устройства, которое сможет распозновать 256 оттенков необходимого цвета. К примеру,
@ media print and (monochrome) { body { font- family: Times, "Times New Roman" , serif; } h1, h2, p { color: black; } } @ media print and (color) { body { font- family: Arial, Verdana, sans- serif; } h1, h2, p { color: #556b2f; } }
orientation
Функция распознает ориентации страниц в устройстве. Существует две достаточно распространенные ориентации: альбомная и книжная. В первом случае у страницы ширина будет превышать показатель высоты, а во втором - с точностью до наоборот. Ниже представлен пример, в котором фоновое изображение меняется в зависимости от установленной ориентации устройства
@ media screen and (orientation: landscape) { #logo { background: url(logo1.png) no-repeat; } } @ media screen and (orientation: portrait) { #logo { background: url(logo2.png) no-repeat; } }
resolution (min-resolution, max-resolution)
Устанавливает разрешения считывающего устройства, на основе чего будет применятся заданное оформление. Ниже показано, как можно определить оформление для принтера, у которого разрешение составляет 500 точек на дюйм рабочего пространства
@ media print and (min- resolution: 300dpi) { ... }
Этпа функция предназначена только для работы с телевизорами. Таким образом можно определить способ считывания информации данным устройством. Вообще, существует 2 способа:
width (min-width, max-width)
Указывает на ширину активной зоны экрана или браузера. Зачастую этот параметр не превышает ширину экрана устройства для вывода информации. Применяется этот параметр при адаптивной верстке, когда нужнео наладить нормальное оформления для устройств с разной шириной экрана. Ниже представлен один небольшой пример, по которому при изменении ширины будет менятся цвет заднего фона
< html> < head> < meta charset= "utf-8" > < title> Ширина страницы < style> body { background: #eee; } @ media screen and (max- width: 980px) { body { background: #fc0; } } < body> < p> Текст, который не имеет никакого смысла и написан для примера. Такие тексты называют рыбными.
Media queries are useful when you want to modify your site or app depending on a device"s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
Media queries are used for the following:
Note: The examples on this page use CSS"s @media for illustrative purposes, but the basic syntax remains the same for all types of media queries.
SyntaxA media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators . Media queries are case-insensitive.
A media query computes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions compute as true. Queries involving unknown media types are always false.
Note: A style sheet with a media query attached to its tag will still download even if the query returns false. Nevertheless, its contents will not apply unless and until the result of the query changes to true.
Media typesMedia types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type will be implied.
All Suitable for all devices. print Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.) screen Intended primarily for screens. speech Intended for speech synthesizers.
Deprecated media types: CSS2.1 and Media Queries 3 defined several additional media types (tty , tv , projection , handheld , braille , embossed , and aural), but they were deprecated in Media Queries 4 and shouldn"t be used. The aural type has been replaced by speech , which is similar.
Media featuresMedia features describe specific characteristics of the user agent , output device, or environment. Media feature expressions test for their presence or value, and are entirely optional. Each media feature expression must be surrounded by parentheses.
| width | Width of the viewport | |
| height | Height of the viewport | |
| 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 | Does the device use a grid or bitmap screen? | |
| update | How frequently the output device can modify the appearance of content | |
| 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-gamut | Approximate range of colors that are supported by the user agent and output device | Added in Media Queries Level 4. |
| 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 zero if the device isn"t monochrome | |
| inverted-colors | Is the user agent or underlying OS inverting colors? | |
| 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 | Light level of the environment | Added in Media Queries Level 5. |
| prefers-reduced-motion | The user prefers less motion on the page | Added in Media Queries Level 5. |
| prefers-reduced-transparency | The user prefers reduced transparency | Added in Media Queries Level 5. |
| prefers-contrast | Detects if the user has requested the system increase or decrease the amount of contrast between adjacent colors | Added in Media Queries Level 5. |
| prefers-color-scheme | Detect if the user prefers a light or dark color scheme | Added in Media Queries Level 5. |
| scripting | Detects whether scripting (i.e. JavaScript) is available | Added in Media Queries Level 5. |
| device-width | Width of the rendering surface of the output device | |
| 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. |
The logical operators not , and , and only can be used to compose a complex media query. You can also combine multiple media queries into a single rule by separating them with commas.
andThe and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.
notThe not operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.
Note: In Level 3, the not keyword can"t be used to negate an individual media feature expression, only an entire media query.
onlyThe only operator is used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use the only operator, you must also specify a media type.
, (comma)Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.
Targeting media typesMedia types describe the general category of a given device. Although websites are commonly designed with screens in mind, you may want to create styles that target special devices such as printers or audio-based screenreaders. For example, this CSS targets printers:
@media print { ... }
You can also target multiple devices. For instance, this @media rule uses two media queries to target both screen and print devices:
@media screen, print { ... }
See for a list of all media types. Because they describe devices in only very broad terms, just a few are available; to target more specific attributes, use media features instead.
Targeting media featuresMedia features describe the specific characteristics of a given user agent , output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user"s primary input mechanism (such as a mouse) can hover over elements:
@media (hover: hover) { ... }
Many media features are range features , which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser"s viewport width is equal to or narrower than 12450px:
@media (max-width: 12450px) { ... }
If you create a media feature query without specifying a value, the nested styles will be used as long as the feature"s value is not zero (or none , in Level 4). For example, this CSS will apply to any device with a color screen:
@media (color) { ... }
If a feature doesn"t apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:
@media speech and (aspect-ratio: 11/5) { ... }
For more examples, please see the reference page for each specific feature.
Creating complex media queriesSometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not , and , and only . Furthermore, you can combine multiple media queries into a comma-separated list ; this allows you to apply the same styles in different situations.
In the previous example, we"ve already seen the and operator used to group a media type with a media feature . The and operator can also combine multiple media features into a single media query. The not operator, meanwhile, negates a media query, basically reversing its normal meaning. The only operator prevents older browsers from applying the styles.
Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.
Combining multiple types or featuresThe and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:
@media (min-width: 30em) and (orientation: landscape) { ... }
To limit the styles to devices with a screen, you can chain the media features to the screen media type:
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
Testing for multiple queriesYou can use a comma-separated list to apply styles when the user"s device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user"s device has either a minimum height of 680px or is a screen device in portrait mode:
@media (min-height: 680px), screen and (orientation: portrait) { ... }
Taking the above example, if the user had a printer with a page height of 800px, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480px, the second query would apply and the media statement would still return true.
Inverting a query"s meaningThe not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can"t be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:
@media not all and (monochrome) { ... }
So that the above query is evaluated like this:
@media not (all and (monochrome)) { ... }
Rather than like this:
@media (not all) and (monochrome) { ... }
As another example, the following media query:
@media not screen and (color), print and (color) { ... }
Is evaluated like this:
@media (not (screen and (color))), print and (color) { ... }
Improving compatibility with older browsersThe only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.
@media only screen and (color) { ... }
Syntax improvements in Level 4The Media Queries Level 4 specification includes some syntax improvements to make media queries using features that have a "range" type, for example width or height, less verbose. Level 4 adds a range context for writing such queries. For example, using the max- functionality for width we might write the following:
@media (max-width: 30em) { ... }
In Media Queries Level 4 this can be written as:
@media (width
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 .Подключаем Media Queries Javascript
Internet Explorer 8 и более ранних версий не поддерживает CSS3 media queries. Вы можете включить ее, добавив Javascript файл css3-mediaqueries.js .
Подключаем CSS media queries
Создаем новый CSS файл для media queries. Посмотрите мою прошлую статью, что бы увидеть как работают media queries .
Размер экрана меньше 980px (резиновый макет)
Для размера экрана меньше 980px применим следующие правила:
Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.
Для начала посмотрим это в действии. Пред началом посмотрите на финальное демо , что бы увидеть, как хорошо это выглядит. Изменяйте размер браузера, что бы увидеть как структура автоматически изменяется основываясь на ширине окна.Другие примеры Если вы хотите увидеть больше примеров, посмотрите следующие темы для WordPress , которые я сделал используя media queries: iTheme2 , Funki , Minblr и Wumblr .Обзор Контейнер страницы имеет ширину 980px для любого разрешения, больше 1024px. Для проверки ширины используются media queries, если ширина меньше чем 980px, в этом случае макет становится резиновым, вместо фиксированной ширины. Если ширина меньше 650px, то контейнеры с контентом и боковой панелью расширяются на полный экран и становятся в одну колонку.
В предыдущей статье я рассказал о том, и для чего она нужна. И там я сказал, что основной механизм адаптивной вёрстки - это медиа-запросы . Вот о медиа-запросах в CSS мы и поговорим в этот раз.
Давайте сразу разберём пример медиа-запроса :
body {
font-size: 9pt;
}
}
Данный код означает следующее: "Если ширина окна браузера 768px, то применить стили, указанные в фигурных скобках ". Чтобы лучше понять, как это работает, напишите вот такой код:
Медиа-запросы
body {
font-size: 15pt;
}
@media screen and (max-width: 768px) {
body {
font-size: 9pt;
}
}
Откройте этот код в браузере и обратите внимание на размер текста. Теперь начните уменьшать ширину окна браузера, и когда она достигнет 768px , то текст заметно уменьшится. Вот это и есть адаптивная вёрстка и работа медиа-запросов в CSS .
Безусловно, таких медиа-запросов может быть очень много, а внутри них может быть далеко не один селектор body , а сколько угодно самых разных селекторов.
Так же есть и другие параметры, такие как min-width , который будет срабатывать при указанной ширине и больше. Аналогичные параметры max-height и min-height , отвечающие за высоту. Так же можно комбинировать разные параметры через and :
@media screen and (max-width: 768px) and (max-height: 300px) {
body {
font-size: 9pt;
}
}
В данном случае стили будут подключаться только при ширине меньше, либо равной 768px и при высоте меньше, либо равной 300px .
Что касается практики, то могу смело сказать, что в 95% случаях используется лишь один max-width . Иногда ещё и min-width . И ещё раз повторяю, что есть и другие медиа-запросы в CSS , но забивать ими Вашу голову не буду. Но если очень хочется, то их можно посмотреть в справочнике.
