Уровень подготовки веб-мастера: средний/высокий
Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.
Мы стремимся повысить доступность наших продуктов, то есть предоставить всем пользователям оптимальные возможности для работы с ними. Перед нами стояла дилемма: создать специальные мобильные версии сайтов или адаптировать существующие сайты и новые проекты для просмотра как на настольных компьютерах, так и на мобильных устройствах. Создание двух версий сайта позволило бы нам оптимизировать каждую из них для конкретного оборудования, но использование одного общего сайта дает возможность сохранить канонический URL. При этом исключаются сложные переадресации и упрощается совместное использование веб-адресов. Удобство обслуживания является важным фактором, поэтому мы решили не создавать разные версии страниц, а начали обдумывать, как обеспечить выполнение следующих условий:
- четкое отображение страниц на экране с любым разрешением;
- возможность просмотра группы контента на любом устройстве;
- отсутствие горизонтальной полосы прокрутки независимо от размера окна.
Изменяется расположение контента, навигация и масштаб изображений – Хромбуки
Реализация
Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет. Это первый шаг на пути к достижению нашей цели. Вместо атрибута
width
для контейнеров мы стали указывать max-width
. Атрибут height
был заменен атрибутом min-height
, чтобы крупный шрифт или многострочный текст не нарушал границы контейнера. Чтобы картинки с фиксированной шириной не ломали резиновые столбцы, применяется следующее правило CSS: img { max-width: 100%; }
Резиновый макет – хорошая идея, но использование такой компоновки накладывает некоторые ограничения. К счастью, медиа-запросы теперь поддерживаются всеми современными браузерами, в том числе IE9+ и браузерами основной части мобильных устройств. Это позволяет создавать сайты, качество отображения которых в мобильных браузерах не снижается, поскольку они оптимизируются под тот или иной интерфейс. Но сначала необходимо определить, какие особенности смартфонов должны учитываться веб-серверами.
Области просмотра
Когда пиксель не является пикселем? В том случае, если речь идет о смартфоне. Обычно браузеры смартфонов имитируют браузеры настольных компьютеров с высоким разрешением, поэтому страницы отображаются в них, как на экране монитора. Вот почему появился «режим обзора» с мелким текстом, который невозможно прочитать без увеличения. Ширина области просмотра по умолчанию в стандартных браузерах Android составляет 800 пикселей, а в браузерах iOS – 980 пикселей, независимо от фактического количества физических пикселей на экране.
Чтобы переключить браузер в более удобный для чтения режим, необходимо использовать метаэлемент viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
Существует множество вариантов разрешения экранов мобильных устройств, но стандартное значение 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 */
}
Изменяется расположение контента и масштаб изображений – Институт культуры
Пример использования медиа-запросов
Недавно мы запустили новую версию страницы О Google. Чтобы пользователям устройств с небольшими экранами, такими как планшеты и смартфоны, было удобнее работать с этой страницей, кроме резинового макета мы добавили в ее код несколько медиа-запросов.
Вместо того чтобы нацеливаться на конкретные разрешения экранов, мы задали относительно широкий набор контрольных точек. Если разрешение экрана составляет более 1024 пикселей, страница отображается в своем первоначальном виде на сетке из 12 столбцов. Если оно составляет от 801 до 1024 пикселей, благодаря резиновому макету отображается слегка сжатая версия страницы.
Только при разрешении экрана менее 800 пикселей неосновной контент будет отображаться в нижней части страницы:
@media screen and (max-width: 800px) {
/* specific CSS */
}
Последний медиа-запрос предназначен для смартфонов:
@media screen and (max-width: 479px) {
/* specific CSS */
}
С этого момента прекращается загрузка больших изображений; блоки контента размещаются один над другим. Мы также добавили дополнительные пробелы между элементами контента, чтобы более четко разграничить разделы.
Эти простые приемы позволили оптимизировать сайт для просмотра на самых разных типах устройств.
Изменяется расположение контента, удалено большое изображение – О Google
Заключение
Важно понимать, что не существует простого решения, которое бы позволило сделать сайты удобными для просмотра на мобильных устройствах и устройствах с узкими экранами. Резиновые макеты хороши в качестве отправной точки, но их использование накладывает некоторые ограничения. Медиа-запросы также помогают оптимизировать сайты, но не следует забывать, что в 25% случаев при посещении сайтов используются компьютерные браузеры, которые еще не поддерживают данную технологию. Наличие таких запросов влияет на эффективность их работы. А если на сайте есть виджет, с которым удобно работать с помощью мыши, вовсе не факт, что он будет столь же удобен на сенсорном экране, где сложнее выполнять точные действия.
Оптимизация сайта для мобильных устройств позволит привлечь на него еще больше посетителей. Кроме того, изучение и разработка наилучших методов такой оптимизации открывает новые возможности для профессионального развития.
Другие примеры адаптивного веб-дизайна в Google:
Авторы публикации: Руперт Брейени, Эдвард Юнг, Мэтт Зюррер, команда веб-мастеров Google.
Медиазапросы используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые есть у Ваших пользователей.
Медиа для разных типов устройств
Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:
@media print { ... }
Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:
@media screen, print { ... }
Список устройств вы можете найти перейдя по этой ссылке. Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.
Media features описывают некие характеристики определенного user agent, устройства вывода или окружения. Например, Вы можете применить выбранные стили только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещенности. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь) будет расположено над элементами:
@media (hover: hover) { ... }
Многие медиа-выражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS код применяется только если ширина viewport меньше или равна 12450px:
@media (max-width: 12450px) { ... }
Если вы создаете медиа-запрос без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:
@media (color) { ... }
Если функция не применима к устройству, на котором работает браузер, выражения, включающие эту функцию, всегда ложны. Например, стили, вложенные в следующий запрос, никогда не будут использоваться, потому что ни одно речевое устройство не имеет формат экрана:
@media speech and (aspect-ratio: 11/5) { ... }
Дополнительные примеры медиа запросов, смотрите на справочной странице для каждой конкретной функции.
Создание комплексных медиа запросов
Иногда вы хотите создать медиа-запрос, включающий в себя несколько условий. В таком случае применяются логические операторы: not
, and
, and only
. Кроме того, вы можете объединить несколько медиа-запросов в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.
В прошлом примере мы видели как применяется оператор and
для группировки type и функции. Оператор and
так же может комбинировать несколько функций в одно медиа-выражение. Между тем, оператор not отрицает медиазапрос, полностью инвертируя его значение. Единственный оператор не позволяет старым браузерам применять стили.
Note: In most cases, the all
not
or only
operators, you must explicitly specify a media type.
and
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) { ... }
comma-separated lists
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.
not
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:
@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) { ... }
only
The 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.
<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />
Смотрите также
CSS - Медиа запросы (media queries)
- Статьи
- Видеоуроки
- Таймлайн
- Вопросы
- Поиск
-
- Войти
- Регистрация
- HTML & CSS
- JavaScript
- Bootstrap
@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
- Подходит для всех устройств.
- 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
- Предназначен для синтезаторов речи.
tty
, tv
, projection
, handheld
, braille
, embossed
, aural
), но они устарели в Media Queries 4 и не рекомендуется к использованию.
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 transform s supported? |
Nonstandard; WebKit/Blink-specific |
-webkit-transform-2d |
Are CSS 2D transform s supported? |
Nonstandard; WebKit-specific |
-webkit-transition |
Are CSS transition s supported? |
Nonstandard; WebKit-specific |
-webkit-animation |
Are CSS animation s 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 } }
Спецификации
Совместимость с браузерами
Особенность | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Базовая поддержка(all , print , screen ) |
1.0 | 1.0 (1.7 или ранее) | 6.0 | 9.2 | 1.3 |
speech |
Нет | Нет | Нет | 9.2 | Нет |
Media features | 1.0 | 1.0 (1.7 или ранее) | 9.0 | 9.2 | 1.3 |
display-mode media feature |
? | 47 (47) | ? | ? | ? |
Особенность | 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 @media Rule
Пример
Измените цвет фона элемента
на «lightblue», когда окно браузера имеет ширину 600px или меньше:
@ только экран и (максимальная ширина: 600 пикселей) {тело
{
цвет фона: голубой;
}
}
Ниже приведены примеры "Попробуйте сами".
Определение и использование
Правило @media
используется в медиазапросах для применения разных стилей для разных типов медиа / устройств.
Медиа-запросы могут использоваться для проверки многих вещей, таких как:
- ширина и высота окна просмотра
- ширина и высота устройства
- ориентация (планшет / телефон в альбомной или портретной ориентации?) Разрешение
Использование медиа-запросов является популярной техникой для предоставления индивидуального стиля лист (адаптивный веб-дизайн) для настольных компьютеров, ноутбуков, планшетов и мобильных телефонов.
Также можно использовать медиазапросы, чтобы указать, что определенные стили предназначены только для печатных документов или для программ чтения с экрана (медиатип: печать, экран или речь).
В дополнение к типам носителей, есть также функции носителей. Медиа особенности предоставить более конкретные детали для медиа-запросов, позволяя проверить на особенность пользовательского агента или устройства отображения. Например, вы может применять стили только к тем экранам, которые больше или меньше, чем определенная ширина.
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает правило @media.
Недвижимость | |||||
---|---|---|---|---|---|
@media | 21 | 9 | 3.5 | 4,0 | 9 |
Синтаксис CSS
@media not | only mediatype и (mediafeature and | or | not
mediafeature) {
CSS-код;
}
значение , а не , только и и ключевые слова:
not: Ключевое слово not изменяет значение целого медиа запрос.
Только : Единственное ключевое слово не позволяет старым браузерам, которые не поддерживают медиазапросы с медиа функциями, применять указанные стили. Не влияет на современные браузеры.
и: Ключевое слово and объединяет мультимедийную функцию со мультимедийной тип или другие медиа-функции.
Все они необязательны. Однако, если вы используете , а не или только , вы также должны указать тип носителя.
Вы также можете иметь разные таблицы стилей для разных носителей, например это:
....
Типы носителей
Значение | Описание |
---|---|
все | По умолчанию. Используется для всех медиа-устройств |
печать | Используется для принтеров |
Используется для экранов компьютеров, планшетов, смартфонов и т. Д. | |
речь | Используется для программ чтения с экрана, которые «вслух» читают страницу |
Media Features
Значение | Описание |
---|---|
Any-Hover | Позволяет ли любой доступный механизм ввода пользователю элементы? (добавлено в Media Queries Уровень 4) |
любая указка | Является ли любой доступный механизм ввода указательным устройством, и если да, то как точно ли это? (добавлено в Media Queries Уровень 4) |
аспектное соотношение | Соотношение ширины и высоты окна просмотра |
цвет | Количество бит на компонент цвета для устройства вывода |
цветовая гамма | Примерный диапазон цветов, которые поддерживаются пользовательским агентом и устройство вывода (добавлено в Media Queries Level 4) |
цветовой индекс | Количество цветов, которое может отображать устройство |
сетка | Является ли устройство сеткой или растровым изображением |
высота | Высота смотрового окна |
наведите | Позволяет ли основной механизм ввода пользователю наводить курсор на элементы? (добавлено в Media Queries Уровень 4) |
перевернутых цветов | Инвертирует ли браузер или основную ОС цвета? (добавлено в СМИ Запросы Уровень 4) |
уровень света | Текущий уровень внешней освещенности (добавлено в Media Queries Level 4) |
максимальное соотношение сторон | Максимальное соотношение между шириной и высотой области отображения |
max-color | Максимальное количество бит на компонент цвета для устройства вывода |
Макс-цвет-индекс | Максимальное количество цветов, которое может отображать устройство |
Максимальная высота области отображения, например окна браузера | |
макс-монохромный | Максимальное количество бит на «цвет» на монохромном (полутоновом) устройстве |
Максимальное разрешение устройства, с использованием dpi или dpcm | |
Максимальная ширина области отображения, например окна браузера | |
мин. Соотношение сторон | Минимальное соотношение между шириной и высотой области отображения |
мин-цвет | Минимальное количество бит на компонент цвета для устройства вывода |
min-color-index | Минимальное количество цветов, которое может отображать устройство |
мин. Высота | Минимальная высота области отображения, например окна браузера |
мин-монохромный | Минимальное количество бит на «цвет» на монохромном (полутоновом) устройстве |
мин. Разрешение | Минимальное разрешение устройства, с использованием dpi или dpcm |
мин. Ширина | Минимальная ширина области отображения, например окна браузера |
монохромный | Количество бит на «цвет» на монохромном (полутоновом) устройстве |
ориентация | Ориентация области просмотра (альбомная или портретная ориентация) |
Как устройство вывода обрабатывает контент, который выходит за пределы области просмотра вдоль оси блока (добавлено в Media Queries Level 4) | |
встроенный перелив | Можно ли прокручивать содержимое, которое выходит за пределы области просмотра вдоль встроенной оси (добавлено в Media Queries Level 4) |
Является ли основной механизм ввода указательным устройством, и если да, то как точно ли это? (добавлено в Media Queries Уровень 4) | |
Разрешение устройства вывода, используя dpi или dpcm | |
сканирование | Процесс сканирования устройства вывода |
сценариев | - это сценарии (например,грамм. JavaScript) доступен? (добавлено на уровне медиазапросов 4) |
обновление | Как быстро устройство вывода может изменять внешний вид контента (добавлено в Media Queries Level 4) |
ширина | Ширина окна просмотра |
Дополнительные примеры
Пример
Скрыть элемент, если ширина браузера 600 пикселей или меньше:
@ экран мультимедиа и (максимальная ширина: 600 пикселей) {
дел.пример {
дисплей:
никто;
}
}
Пример
Используйте медиазапросы, чтобы установить цвет фона лаванды, если видовой экран 800 пикселей в ширину или шире, светло-зеленый, если ширина области просмотра составляет от 400 до 799 пикселей. Если область просмотра меньше, чем 400 пикселей, цвет фона светло-голубой:
цвет кузова {: светло-синий;
}
@media screen и (min-width:
400px) {
body {
цвет фона: светло-зеленый;
}
}
@media
экран и (минимальная ширина: 800 пикселей) {тело
{
цвет фона: лаванда;
}
}
Пример
Создание адаптивного меню навигации (отображается горизонтально на больших экранах и вертикально на маленьких экранах):
@ экран мультимедиа и (максимальная ширина: 600 пикселей) {
.topnav a {
плавать: нет; Ширина
: 100%;
}
}
Пример
Используйте медиа-запросы для создания адаптивного макета столбца:
/ * На экранах шириной 992 пикселя или меньше переходите от четырех столбцов к двум столбцы * /@ мультимедийный экран и (максимальная ширина: 992 пикселей) {
.column {
ширина: 50%;
}
}
/ * На экранах шириной 600px или меньше стеки столбцов
друг на друга, а не рядом друг с другом * /
@media screen и (max-width:
600px) {
.ширина столбца {
: 100%;
}
}
Пример
Медиа-запросы также могут быть использованы для изменения макета страницы в зависимости от ориентация браузера. Вы можете иметь набор свойств CSS, которые будут только применять, когда окно браузера шире его высоты, так называемый «пейзаж» ориентации.
Используйте светло-синий цвет фона, если ориентация в альбомном режиме:
@media только экран и (ориентация:
пейзаж) {
кузов {
цвет фона: голубой;
}
}
Пример
Используйте медиазапросы, чтобы установить зеленый цвет текста, когда документ отображается на экране и становится черным при печати:
@media screen {body {
цвет: зеленый;
}
}
@media print {
корпус {
цвет: черный;
}
}
Пример
Разделенный запятыми список : добавить дополнительный медиазапрос к уже существующему, используя запятую (это будет вести себя как оператор ИЛИ):
/ * Если ширина составляет от 600 до 900 пикселей ИЛИ больше 1100 пикселей - измените появление экрана
@media и (максимальная ширина: 900 пикселей) и (минимальная ширина: 600 пикселей), (минимальная ширина: 1100 пикселей) {
дел.пример {
размер шрифта: 50 пикселей;
отступы: 50 пикселей;
граница: сплошной черный 8px;
фон: желтый;
}
}
Попробуй сам "
Связанные страницы
Учебник CSS: CSS Media Queries
Учебник CSS: примеры CSS Media Queries
RWD Tutorial: Адаптивный веб-дизайн с медиазапросами
Руководство по JavaScript: метод window.matchMedia ()
,
Разница между @media screen и @media Only Screen и
- Товары
- Клиенты
- Случаи использования
- Переполнение стека Публичные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимать технический талант
- реклама Связаться с разработчиками по всему миру
Загрузка…
,CSS3 Media Queries - Примеры
CSS Media Queries - Дополнительные примеры
Давайте рассмотрим еще несколько примеров использования медиа-запросов.
Медиа-запросы - это популярный метод доставки адаптированной таблицы стилей на разные устройства. Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для разных устройств:
Пример
/ * Установить цвет фона тела для загара * /body {
цвет фона: загар;
}
/ * Вкл
Для экранов с разрешением 992 пикселя или менее установите цвет фона на синий * /
@media
экран и (max-width: 992px) {
корпус {
цвет фона: синий;
}
}
/ * На экранах с разрешением 600px или меньше,
установить
цвет фона - оливковый * /
@media screen и (max-width: 600px) {
цвет кузова {
цвет фона: оливковый;
}
}
Вам интересно, почему мы используем точно 992px и 600px? Это то, что мы называем «типичными точками останова» для устройств.Вы можете прочитать больше о типичных точках останова в нашем учебном руководстве по адаптивному веб-дизайну.
медиа-запросов для меню
В этом примере мы используем медиазапросы для создания адаптивного меню навигации, которое меняется в дизайне на разных размерах экрана.
Пример
/ * Контейнер navbar * /.topnav {переполнение
: скрыто;
цвет фона: # 333;
}
/ * ссылки Navbar * /
.topnav a {
float:
осталось; Дисплей
: блок;
цвет:
белый;
выравнивание текста: по центру;
отступ: 14px 16px;
текстовое оформление: нет;
}
/ * На экранах шириной 600 пикселей или менее, расположите ссылки меню сверху
друг от друга, а не рядом друг с другом * /
@media screen и (max-width: 600px) {
,topnav a {
float: нет; Ширина
:
100%;
}
}
медиа-запросов для столбцов
Распространенное использование медиа-запросов, заключается в создании гибкого макета. В этом примере мы создаем макет, который варьируется между четырьмя, двумя столбцами и столбцами полной ширины, в зависимости от размеров экрана:
Пример
/ * Создать четыре равных столбца, которые плавают рядом друг с другом * /.column {
плыть налево; Ширина
: 25%;
}
/ * На экранах с разрешением 992 пикселей
широкий или менее, перейти от
от четырех столбцов до двух столбцов * /
@ мультимедийный экран и (максимальная ширина: 992px) {
,ширина колонны {
: 50%;
}
}
/ * На экранах, которые
Шириной 600 пикселей или меньше, сделать
столбцы располагаются друг над другом, а не рядом друг с другом * /
@ экран мультимедиа и (max-width: 600px) {
.column {
width:
100%;
}
}
Совет: Более современный способ создания макетов столбцов заключается в использовании CSS Flexbox (см. Пример ниже). Однако это не поддерживается в Internet Explorer 10 и более ранних версиях.Если вам требуется поддержка IE6-10, используйте float (как показано выше).
Чтобы узнать больше о модуле гибкой компоновки, прочитайте нашу главу о CSS Flexbox.
Чтобы узнать больше о адаптивном веб-дизайне, прочитайте наш учебник по адаптивному веб-дизайну.
Пример
/ * Контейнер для флексбоксов * /.row {
display: flex;
flex-wrap: обертывание;
}
/ * Создание четырех одинаковых столбцов * /
.column {
flex: 25%;
отступы: 20 пикселей;
}
/ * На экранах шириной 992 пикселя или меньше переходите от
от четырех столбцов до двух столбцов * /
@ мультимедийный экран и (максимальная ширина: 992px) {
,колонна {
flex: 50%;
}
}
/ * На экранах шириной 600 пикселей или меньше
столбцы располагаются друг над другом, а не рядом друг с другом * /
@ экран мультимедиа и (макс. ширина: 600 пикселей) {
.row {
flex-direction: столбец;
}
}
Скрыть элементы с медиазапросами
Другое распространенное использование медиазапросов - скрытие элементов на экранах разных размеров:
Я буду прятаться на маленьких экранах.
Пример
/ * Если размер экрана составляет 600 пикселей в ширину или меньше, скрыть элемент * /
@media
экран и (максимальная ширина: 600 пикселей) {
div.example {
дисплей: нет;
}
}
Изменить размер шрифта с помощью медиазапросов
Вы также можете использовать медиа-запросы, чтобы изменить размер шрифта элемента на разные размеры экрана:
Пример
/ * Если размер экрана превышает 600 пикселей в ширину, установите размер шрифта равным 80px * /@media screen и (min-width: 600px) {
дел.пример {
размер шрифта: 80 пикселей;
}
}
/ * Если размер экрана составляет 600 пикселей в ширину или меньше, установите размер шрифта
@media screen и (max-width: 600px) {
div.example {
размер шрифта: 30 пикселей;
}
}
Попробуй сам "
Гибкая галерея изображений
В этом примере мы используем медиазапросы вместе с flexbox для создания адаптивной галереи изображений:
Гибкий сайт
В этом примере мы используем медиазапросы вместе с flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент.
Ориентация: Портрет / Пейзаж
Медиа-запросы также могут быть использованы для изменения макета страницы в зависимости от ориентация браузера.
У вас может быть набор свойств CSS, который будет только применять, когда окно браузера шире его высоты, так называемый «пейзаж» ориентация:
Пример
Используйте светло-синий цвет фона, если ориентация в альбомном режиме:
@media только экран и (ориентация:
пейзаж) {
кузов {
цвет фона: голубой;
}
}
от минимальной ширины до максимальной ширины
Вы также можете использовать (максимальная ширина: ., ) и (min-width: .. ) значения
для установки минимальной ширины и максимальной ширины.
Например, если ширина браузера составляет от 600 до 900 пикселей, измените Внешний вид элемента
Пример
@ экран мультимедиа и (максимальная ширина: 900 пикселей) и (минимальная ширина: 600 пикселей) {
div.example {
размер шрифта: 50 пикселей;
отступ: 50 пикселей;
граница: сплошной черный 8px;
фон: желтый;
}
}
Используя дополнительное значение: В приведенном ниже примере мы добавляем дополнительный медиа-запрос к нашему уже существующий с запятой (это будет вести себя как оператор ИЛИ):
Пример
/ * Когда ширина составляет от 600 до 900 пикселей, ИЛИ выше 1100 пикселей - изменить внешний вид экрана
@media, а также (max-width: 900px) и (min-width: 600px), (минимальная ширина: 1100px) {
дел.пример {
размер шрифта: 50 пикселей;
отступ: 50 пикселей;
граница: сплошной черный 8px;
фон: желтый;
}
}
Попробуй сам "
CSS @media Reference
Для полного обзора всех типов носителей и функций / выражений, пожалуйста, посмотрите на Правило @media в нашей ссылке CSS.
Подсказка: Чтобы узнать больше об адаптивном веб-дизайне (как настроить таргетинг на разные устройства и экраны), используя точки останова медиа-запросов, прочитайте наше Учебное пособие по адаптивному веб-дизайну.
,