CSS предоставляет способ отображения содержимого веб-страницы по разному, в зависимости от устройства, на котором оно просматривается, или разрешения экрана (размера области просмотра в браузере) без необходимости изменения самого содержимого. Медиа запросы состоят из выражения, которое ограничивает область действия таблицы стилей и самой таблицы стилей, размещаемой в фигурных скобках.
Также можно включать различные стили для различных устройств вывода информации с помощью атрибута media тега link:
Тип | Описание |
---|---|
all | Используется для всех типов устройств. |
aural | Используется для синтезаторов речи и звука. |
braille | Используется для тактильной обратной связи устройств Брайля. |
embossed | Используется для принтеров Брайля. |
handheld | Используется для небольших или портативных устройств. |
Используется для принтеров | |
projection | Используется для презентаций, таких как слайды. |
screen | Используется для экранов компьютеров, планшетов, смартфонов и т.д. |
speech | Используется для речевых браузеров. |
tty | Используется для носителей, использующих сетки с фиксированным шагом символов, такие как телетайпы и терминалы. |
tv | Используется для телеэкранов. |
К сожалению тип устройства дает слишком мало информации, поэтому редко используется по прямому назначению. Современные смартфоны и планшеты, ноутбуки и настольные компьютеры идентифицируют себя как тип screen. Поэтому тип носителя обычно используется для различения экранных версий документа от печатных, что позволяет совершенно по разному их оформлять:
/* только для печати */ @media print { /* скрыть меню */ #navigation { display: none; } /* начинать каждую новую страницу с заголовка h1 */ h1 { page-break-before: always; } }
Особенность | Описание |
---|---|
aspect-ratio | Определяет соотношение ширины и высоты области просмотра. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс "min" или "max". |
color | Определяет количество бит на цвет для устройства. Может иметь префикс "min" или "max". |
color-index | Указывает количество цветов, которое устройство может отображать. Может иметь префикс "min" или "max". |
device-aspect-ratio | Определяет соотношение ширины и высоты устройства вывода. Значение состоит из двух положительных чисел, разделенных прямой косой чертой (слэшем). Первое число представляет собой количество пикселей по горизонтали, второе по вертикали. Может иметь префикс "min" или "max". |
device-height | Указывает высоту устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс "min" или "max". |
device-width | Указывает ширину устройства, такого как экран компьютера (имеется в виду весь экран или страницу, а не только область просмотра). Может иметь префикс "min" или "max". |
grid | Определяет как устроен вывод у устройства: на основе сетки или точечный. Если устройство на основе сетки (например, терминал, телетайп или дисплей телефона, поддерживающий только один шрифт), то значение 1, в противном случае значением будет 0. |
height | Указывает высоту области просмотра, например, окно браузера. Может иметь префикс "min" или "max". |
monochrome | Указывает количесвто бит на пиксель для устройств с монохромными экранами. Может иметь префикс "min" или "max". |
orientation | Указывает в каком режиме просмотра находится дисплей: ландшафтном (ширина дисплея больше, чем высота) или портретном (высота дисплея больше, чем ширина). |
resolution | Указывает разрешение (плотность пикселей) устройства вывода. Может быть указана в dpi (точек на дюйм) или в dpcm (точек на сантиметр). Может иметь префикс "min" или "max". |
scan | Определяет процесс сканирования телевизионных устройств вывода. |
width | Указывает ширину области просмотра, например, окно браузера. Может иметь префикс "min" или "max". |
Наиболее важными из особенностей устройств для медиа запросов являются min-width и max-width, позволяющие создавать гибкие конструкции, в которых изменение макета сайта происходит на основе области просмотра браузера, установленного на устройстве.
Медиа запросы сочетают в себе тип устройства и условие, состоящее из одной или нескольких особенностей устройства. Например правила в следующем запросе применяются только при просмотре на экране с минимальной шириной области просмотра 600px:
@media screen and (min-width: 600px) {}
Медиа запросы не чувствительны к регистру, но скобки вокруг условия являются обязательной частью синтаксиса запроса. Оператор and здесь используется для объединения типа устройства с условием, но он также может объединять несколько особенностей устройства вместе:
@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}
Этот медиа запрос имеет значение true, если устройство для просмотра имеет максимальное разрешение области просмотра 500px и соотношение сторон 1:1 (квадрат или ландшафтный просмотр). Обратите внимание, что в этом запросе нет типа устройства, поэтому это правило будет применяться ко всем типам устройств.
В дополнение к логическому оператору and (и), медиа запросы могут включать в себя логическое not (не), only (только) и or (или). Запятая (,) используется в качестве оператора or, то есть каждый запрос рассматривается индивидуально. Это означает, что с помощью запросов, разделенных запятой, можно одно правило @media ориентировать на различные типы устройств и их особенности.
Следующее правило @media применяется либо к устройству с минимальной областью просмотра 700px в ширину, либо если устройство находится в ландшафтном режиме просмотра:
@media (min-width: 700px), (orientation: landscape) {}
Оператор not используется для отрицания условий медиа запроса. Соответствующие стили применяются, если устройство не соответствует указанным вслед за not параметрам. Например следующее правило применяется только в том случае, если экран устройства не 800px в ширину:
@media not screen and (device-width: 800px) {}
Оператор only применяется, когда нужно скрыть правило @media от старых браузеров, которые не поддерживают описываемый синтаксис. Браузеры, которые поддерживают медиа запросы, оператор only просто проигнорируют.
/* Не работает в старых браузерах */ @media only screen and (min-width: 600px) {}
Медиазапросы используются в тех случаях, когда нужно применить разные css стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментов при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые есть у Ваших пользователей.
Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:
@media print { ... }
Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:
@media screen, print { ... }
Список устройств вы можете найти перейдя по этой ссылке . Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.
Media features описывают некие характеристики определенного user agent , устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь) будет расположено над элементами:
@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 12,450px:
@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 non-zero. 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 media feature examples, please see the for each specific feature.
Sometimes 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.
The 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) { ... }
You 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.
The 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.
CSS правило @media используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне.
Свойство | Opera | IExplorer | Edge |
|||
---|---|---|---|---|---|---|
@media | 21.0 | 3.5 | 9.0 | 4.0 | 9.0 | 12.0 |
Давайте детально разберем из чего состоит синтаксис этого правила.
Вы можете комбинировать медиазапросы с использованием логических операторов:
Значение | Описание |
---|---|
and | Оператор and ("И" ) используется для объединения нескольких медиазапросов в один. |
not | Оператор not ("Логическое НЕ" ) обращает результат - если медиазапрос был истинным без "not" , то он станет ложным , и наоборот. |
only | Оператор only ("Только" ) может использоваться для скрытия таблиц стилей от устаревших браузеров, которые не могут обработать медиазапрос (игнорируют), содержащий в себе этот логический оператор. |
, | Оператор "," позволяет объединить несколько медиазапросов через запятую. Если хотя бы один запрос возвращает "true" (соответствует), то условие выполняется и стили будут применены. Этот оператор ведет себя как логический оператор OR ("ИЛИ" ). |
Вы можете использовать медиазапросы для конкретных типов устройств:
Значение | Описание |
---|---|
all | Подходит для всех типов устройств. Это значение по умолчанию. |
aural | Предназначено для речевых синтезаторов . |
braille | Устройства для чтения шрифта Брайля (рельефно-точечный тактильный шрифт, предназначенный для письма и чтения незрячими и плохо видящими людьми). Значение считается устаревшим. |
embossed | Устройства, предназначенные для печати шрифта Брайля. Значение считается устаревшим. |
handheld | Предназначено для портативных устройств (маленький экран и ограниченная полоса пропускания - bandwidth ). Значение считается устаревшим. |
Предназначен для печатных страниц и для режима предварительного просмотра печати. | |
projection | Устройства проекционного типа (проекторы ). Значение считается устаревшим. |
screen | Экраны компьютера. |
speech | Речевые синтезаторы, устройства для чтения с экрана (для чтения страниц вслух). |
tty | Устройства, которые используют набор символов фиксированной ширины , например, телетайпы или терминалы. Значение считается устаревшим. |
tv | Устройства телевизионного типа (низкое разрешение, ограниченные возможности прокрутки, возможность передачи звука). Значение считается устаревшим. |
Значение | Описание |
---|---|
aspect-ratio | Соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: aspect-ratio : 5/4 (соотношение пять к четырем). |
color | Определяет количество бит на цветовую компоненту устройства вывода. Если устройство не является цветным устройством, то это значение равно нулю. . Например, если дисплей использует по 4 бита на красный и синий, а 5 бит на зеленый, то считается, что устройство использует 4 бит на цветовой компонент. |
color-index | Количество цветов, которое устройство может отображать. |
device-aspect-ratio | Соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Например: device-aspect-ratio : 5/4 (соотношение пять к четырем). Media Queries Level 4 " . |
device-height | Определяет высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
device-width | Определяет ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
grid | Определяет основано ли выходное устройство на сеточной системе (например, терминал "tty" или дисплей телефона с одним фиксированным шрифтом), в этом случае значение будет равно 1 , если устройство растровое, то значение будет равно 0 . |
height | Задает высоту области просмотра (используются ). |
max-aspect-ratio | Максимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
max-color | Определяет максимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения . |
max-color-index | Максимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
max-device-aspect-ratio | Масимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
max-device-height | Определяет максимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
max-device-width | Определяет максимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
max-height | Задает максимальную высоту области просмотра (используются единицы измерения CSS). |
max-monochrome | Указывает максимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. . |
max-resolution | Указывает максимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ). |
max-width | Задает максимальную ширину области просмотра (используются единицы измерения CSS). |
min-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра (соотношение сторон экрана). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. |
min-color | Определяет минимальное количество бит на цветовую компоненту устройства вывода. Допускаются только положительные значения . |
min-color-index | Минимальное количество цветов, которое устройство может отображать. Отрицательные значения не допускаются. |
min-device-aspect-ratio | Минимальное соотношение ширины и высоты области просмотра выходного устройства (соотношение сторон). Это значение состоит из двух целых положительных чисел, разделенных косой чертой ("/"). Первое число это соотношение пикселей по горизонтали, а второе по вертикали. Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
min-device-height | Определяет минимальную высоту устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
min-device-width | Определяет минимальную ширину устройства вывода (весь экран или страницу, а не только отображаемую область). Значение считается устаревшим и удалено из "Media Queries Level 4 " . |
min-height | Задает минимальную высоту области просмотра (используются единицы измерения CSS). |
min-monochrome | Указывает минимальное количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа . |
min-resolution | Указывает минимальное разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ). |
min-width | Задает минимальную ширину области просмотра (используются единицы измерения CSS). |
Указывает количество бит на пиксель монохромного устройства. Если устройство не является монохромным, то значение будет равно 0. Допускаются только положительные целые числа . | |
orientation | Определяет, находится ли область просмотра в режиме альбомной ориентации - экран шире, чем высота, или в портретной ориентации - высота дисплея больше или равна ширине. Для альбомной ориентации используется значение: orientation : landscape , а для портретной и orientation : portrait . |
resolution | Указывает разрешение устройства вывода (например, монитор, или принтер). Разрешение может быть указано как в точках на дюйм (dpi ), так и в точках на сантиметр (dpcm ). |
scan | Указывает метод сканирования устройства вывода. Слово сканирование, используемое в этом контексте, не относится к сканеру изображений, например к сканеру, используемому для оцифровки фотографии. Скорее, это означает процесс, посредством которого изображение рисуется на телевизионном экране (или другом устройстве). Для того, чтобы указать тип развертки устройства, необходимо указать одно из значений: череcстрочная развертка - (interlace ), прогрессивная развертка (progressive ). |
width | Задает ширину области просмотра (используются единицы измерения CSS). |
Обратите внимание, что в этом случае используется в качестве значения атрибута media тот же синтаксис, что и при использовании правила @media .
2. Используя CSS правило @media внутри HTML тега
Обратите внимание, что при использовании атрибута media тега 2. Используя CSS правило @media внутри HTML тега
Кроме того, Вы можете использовать правило @import , которое позволяет копировать стили из других CSS файлов:
@import url ("main.css" ) (min-width :481px ) and (max-width :768px ); /* импортируем содержимое файла css, который предназначается для устройств с разрешением экрана, находящегося в диапозоне от 481 пикселей до 768 пикселей */ @import url ("print.css" ) print; /* импортируем содержимое файла css, который предназначается для печатных страниц и для режима предварительного просмотра печати */ @import url ("protv.css" ) projection, tv; /* импортируем содержимое файла css, который предназначается для устройств проекционного типа и телевизионного типа */ @import url ("file.css" ) screen and (orientation :landscape ); /* импортируем содержимое файла css, который предназначается для экранов компьютера И альбомной ориентации.*/Учтите тот факт, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь необходимо скачать и проанализировать (создается дополнительный запрос к серверу). Исходя из правил и рекомендаций PageSpeed Insight (Google ), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import .
В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4 . Bootstrap это HTML , CSS и Javascript фреймворк для создания адаптивных страниц.
Так как Bootstrap разработан, чтобы быть мобильным в первую очередь, разработчики фреймворка используют несколько медиазапросов для создания разумных точек останова для макетов и интерфейсов. Эти точки останова в основном основаны на минимальной ширине области просмотра и позволяют масштабировать элементы по мере изменения области просмотра.
Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width ) используются в Bootstrap 4 :
// Small devices (landscape phones, минимальная ширина области просмотра 576px и выше) @media (min-width : 576px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и выше) @media (min-width : 768px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и выше) @media (min-width : 992px ) { ...код CSS } // Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше) @media (min-width : 1200px ) { ...код CSS }Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).
Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width ) используются в Bootstrap 4 :
// Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже) @media (max-width : 575.98px ) { ...код CSS } // Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже) @media (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, максимальная ширина области просмотра 992px и ниже) @media (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, максимальная ширина области просмотра 1200px и ниже) @media (max-width : 1199.98px ) { ...код CSS }В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width ):
// Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px) @media (min-width : 576px ) and (max-width : 767.98px ) { ...код CSS } // Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px) @media (min-width : 768px ) and (max-width : 991.98px ) { ...код CSS } // Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px) @media (min-width : 992px ) and (max-width : 1199.98px ) { ...код CSS }Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and ("И"), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра.
Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:
// Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px) @media (min-width : 768px ) and (max-width : 1199.98px ) { ...код CSS }Обращаю Ваше внимание на то, что область просмотра определяет, как веб-страница отображается на мобильном устройстве, если она не задана, то ширина страницы считается равной стандартному значению, и она уменьшается на мобильном устройстве, чтобы поместиться на его экране.
Для того, чтобы мобильные браузеры автоматически не изменяли размер страниц сайта, необходимо в теге разместить метатег, который сообщает браузеру, как обрабатывать размеры страницы и изменять ее масштаб:
name = "viewport" content = "width=device-width, initial-scale = 1" >Если все страницы Вашего сайта адаптированы для просмотра на мобильных устройствах, то размещение вышеуказанного мета тега является обязательным.
Доступные значения:
Значение атрибута | Определение |
---|---|
width | Определяет ширину в пикселях области просмотра (значение - положительное целое число или device-width ). |
height | Определяет высоту в пикселях области просмотра (значение - положительное целое число или device-height ). |
initial-scale | Определяет соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра. Чем больше число, тем выше масштаб. Значение - положительное целое число от 0.0 до 10.0. |
minimum-scale | Определяет минимальное значение zoom (оно должно быть меньше или равно maximum-scale ). Значение - положительное целое число от 0.0 до 10.0. |
maximum-scale | Определяет максимальное значение zoom (оно должно быть больше или равно minimum-scale ). Значение - положительное целое число от 0.0 до 10.0. |
user-scalable | Логическое значение, которое определяет, может ли пользователь увеличить масштаб веб-страницы. Значение по умолчанию yes (пользователь может увеличивать масштаб). |
Рассмотрим пример в котором установим определенные стили, которые браузер будет использовать при просмотре страниц, а другие при печати страниц (в нашем случае для экономии ресурса принтера - цвет всех элементов черный, а цвет заднего фона белый).
Для просмотра страниц пользователями мы установим следующие CSS стили:
h2 { color : brown ;} p { color : red ;} bodyСледующие CSS стили мы будем использовать при печати и предварительном просмотре страницы:
@media print { h2, p { color : #000 ;} body }Окончательный файл CSS будет выглядеть следующим образом:
h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */ @media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF ; } /* устанавливаем цвет заднего фона - белый */ }Обращаю Ваше внимание на важный момент! Если вы используете какое-то правило до того как установлены основные стили, то они не будут работать без использования значения !important , которое отменяет значимость последнего определенного стиля, т.е отменяет конфликты стилей и делает приоритетным тот стиль, который имеет значение !important .
Другими словами, если мы разместим правило @media print { } в начале таблицы стилей, то оно не будет работать без значения !important для конфликтующих стилей (а у него это все стили):
@media print { /* устанавливаем правило для печатных страниц и для режима предварительного просмотра печати */ h2, p { color : #000 !important ;} /* групповой селектор устанавливает цвет элементов - черный */ body { background-color : #FFF !important ; } /* устанавливаем цвет заднего фона - белый */ } h2 { color : brown ;} /* устанавливаем цвет элемента - коричневый */ p { color : red ;} /* устанавливаем цвет элемента - красный */ body { background-color : khaki ;} /* устанавливаем цвет заднего фона - хаки */Теперь свяжем наш файл CSS (css_pr_media.css ) с документом, используя элемент :
rel = "stylesheet" href = "../css_pr_media.css" >HTML разметка примера:
Рапаны (лат. Rapana) - род хищных брюхоногих моллюсков из семейства Muricidae. Распространены в морях Тихого и Индийского океанов. С 1947 года встречается в Черном море. Длина раковины до 12-15 см. Раковина широкоовальной формы, завиток низкий, последний оборот вздут, серовато-коричневого цвета со спиральными рёбрами и осевыми утолщениями. Активные хищники, питающиеся двустворчатыми мелкими моллюсками, например, мидиями и устрицами, раковины которых они открывают при помощи своей сильной мускульной ноги. Молодые рапаны с помощью своего покрытого зубчиками языка-сверла делают отверстия в раковинах своих жертв и раскрывают их. Обитают на любых типах дна, передвигаясь с помощью мускулистой ноги.
Ниже показано как этот пример отображается в браузере, а на изображении как страница отображается в предварительном просмотре печати страницы (стили, которые мы установили для печати).
Приветствую вас на своем блоге. Сегодня я хотел бы вам показать, как пишутся в css медиа-запросы и для чего они вообще нужны при создании шаблона.
Итак, для чего они вообще нужны, эти медиа-запросы? Они позволяют изменить стили каким-то элементам при условии изменения ширины окна. Это как с псевдоклассом hover – он применяет стили к элементу, на который наведен курсор. То есть событие – наведение курсора. Медиа-запросы делают то же самое, только для них событие – изменение ширины экрана. Все, я думаю вам понятно.
Медиа-запросы записываются в таблице стилей, обычно в самом конце файла, когда все остальные стили уже описаны. Синтаксис запроса выглядит так:
@media screen and(max-width: 1000px){ Стили… }
Давайте разберемся подробнее:
@media – собственно, эта приставка в начале и указывает на то, что мы пишем медиа-запрос.
Screen – тип носителя. Тут мы указываем screen, потому что это означает экран монитора (или мобильного устройства). Поскольку мы адаптируем сайт под эти устройства, то нам достаточно указать этот тип, но есть и другие.
And – ключевое логическое слово И. Означает, что после этого идет какое-то условие.
(max-width: 1000px) – само условие. Если ширина окна будет меньше 1000 пикселей, то условие срабатывает и к странице применяются те стили, что будут описаны далее.
Отлично разобраться с медиа-запросами поможет пример. Я создам страницу, которая будет похожа на какую-то статью, и мы ее адаптируем под мобильные устройства. Итак, разметка:
Текст статьи
Тут мы создали общий контейнер для нашей статьи, вставили в нее картинку, заголовок, а само содержание будет в абзацах. Картинку можно взять любую (я взял достаточно большую). Теперь я применю некоторые стили:
Контейнеру задаем максимальную ширину и центрируем его. Теперь при уменьшении окна не будет сразу же появляться горизонтальный скролл, ведь мы записали максимальную ширину, а не фиксированную.
Картинку уводим влево, а текст будет обтекать ее справа с небольшим отступом. Вот так это у меня выглядит:
Я просто добавил много случайного текста в абзацы, чтобы все было больше похоже на реальную статью. Это внешний вид статьи при ширине примерно 800 пикселей. Сейчас все смотрится вполне неплохо, но давайте мы еще уменьшим ширину окна, до 700 пикселей, например:
Вроде бы и неплохо и горизонтальный скролл не появляется, но текстовое содержимое рядом с картинкой стало слишком узким. Слишкое узкие строчки это тоже плохо. И тут нам на помощь придет медиа-запрос.
Важное условие работы! Перед тем, как начинать реализовывать адаптивность, нужно в html в тег head вставить вот такую строчку кода:
Все, теперь все будет работать.
Так, теперь нужно разобраться с тем, как убрать проблему. Собственно, достаточно будет отменить обтекание на ширине от 700 пикселей и меньше и тогда при достижении этой ширины текст сам перенесется под изображение. Также неплохо было бы преобразовать картинку в блок и выровнять ее по центру. Все это делается таким кодом:
@media screen and (max-width: 700px){ img{ float: none; margin: 0 auto; display: block; } }
Вот и все, теперь вот так вот красиво выглядит наша статья на расширении 700 пикселей.
Но теперь возникает еще одна проблема – при большем уменьшении окна наступит то время, когда картинка просто перестанет влазить в окно и начнет образовываться горизонтальный скролл, что не есть хорошо.
Примерно это начинает происходить на пятистах пикселях, поэтому давайте добавим на этой отметке еще один запрос:
@media screen and (max-width: 500px){ img{ width: 80%; } }
Ширина указывалась мной исходя из того, что изображение имеет небольшие отступы, поэтому задание 100-процентной ширины привело бы к появлению скролла.
Готово. Теперь у нас, по сути, адаптивная страница. Пусть она примитивная, но зато адаптивная.
Откройте ее в браузере и уменьшайте ширину окна. Сначала вы увидите, как отменится обтекание, а потом картинка начнет пропорционально уменьшаться в размерах. И всегда будет так, что содержимое будет полностью влезать в окно. Вот она, сила адаптивности!
Конечно, в этой статье я привел вам самые простые примеры, но они очень важны для понимания того, как это вообще работает. На этом у меня все, в будущем постараюсь написать еще пару статей на эту тему.
Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.Img {
max-width: 100%;
}
Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью, медиа-запросы теперь поддерживаются всеми современными браузерами , в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.
Чтобы переключить браузер в более удобный для чтения режим, необходимо использовать метаэлемент viewport:
Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение device-width, сообщаемое браузерами, обычно составляет около 320 пикселей. Если ширина экрана вашего мобильного устройства равна 640 физическим пикселям, изображение шириной 320 пикселей будет масштабировано на всю ширину экрана, и в обработке будет использоваться в два раза больше пикселей. Таким образом, вдвое большая плотность пикселей обеспечивает более четкое отображение на небольшом экране по сравнению с экраном настольного компьютера.
Важно, что если в качестве значения элемента width в метатеге viewport указывается device-width, это значение обновляется, если пользователь меняет ориентацию экрана смартфона или планшета. В сочетании с медиа-запросами эта функция позволяет изменять макет страницы при повороте устройства:
@media screen and (min-width:480px) and (max-width:800px) {
/* Target landscape smartphones, portrait tablets, narrow desktops
*/
}
@media screen and (max-width:479px) {
/* Target portrait smartphones */
}
В зависимости от того, как функционирует и выглядит ваш сайт на экранах различных устройств, может потребоваться использовать разные контрольные точки. Вы можете также использовать медиа-запрос для выбора определенной ориентации без учета соотношения размеров в пикселях, если эта функция поддерживается .
@media all and (orientation: landscape) {
/* Target device in landscape mode */
}
@media all and (orientation: portrait) {
/* Target device in portrait mode */
}
Изменяется расположение контента и масштаб изображений –
Вместо того чтобы нацеливаться на конкретные разрешения экранов, мы задали относительно широкий набор контрольных точек. Если разрешение экрана составляет более 1024 пикселей, страница отображается в своем первоначальном виде на сетке из 12 столбцов. Если оно составляет от 801 до 1024 пикселей, благодаря резиновому макету отображается слегка сжатая версия страницы.
Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:
@media screen and (max-width: 800px) {
/* specific CSS */
}
Последний медиа-запрос предназначен для смартфонов:
@media screen and (max-width: 479px) {
/* specific CSS */
}
С этого момента прекращается загрузка больших изображений; блоки контента размещаются один над другим. Мы также добавили дополнительные пробелы между элементами контента, чтобы более четко разграничить разделы.
Эти простые приемы позволили оптимизировать сайт для просмотра на самых разных типах устройств.
Изменяется расположение контента, удалено большое изображение – О Google