Mobile media css query: Responsive Web Design Media Queries

Содержание

Использование медиавыражений — CSS | MDN

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

Медиавыражения позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:

Вы также можете писать правила сразу для нескольких устройств. Например этот @media написан сразу для экранов и принтеров:

@media screen, print { ... }

Список устройств вы можете найти перейдя по этой ссылке. Но для задания более детальных и узконаправленных правил вам нужно просмотреть следующий раздел.

Media features описывают некие характеристики определённого user agent, устройства вывода или окружения. Например, вы можете применить выбранные стили  только для широкоэкранных мониторов, компьютеров с мышью, или для устройств, которые используются в условиях слабой освещённости. В примере ниже стили будут применены только когда основное устройство ввода пользователя (например мышь)  будет расположено над элементами:

@media (hover: hover) { ... }

Многие медиавыражения представляют собой функцию диапазона и имеют префиксы «min-» или «max-«. Минимальное значение и максимальное значение условия, соответственно. Например этот CSS-код применяется только если ширина viewport меньше или равна 12450px:

@media (max-width: 12450px) { ... }

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

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

@media speech and (aspect-ratio: 11/5) { ... }

Дополнительные примеры медиавыражений, смотрите на справочной странице для каждой конкретной функции.

Иногда вы хотите создать медиавыражение, включающее в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.

В прошлом примере мы видели, как применяется оператор 

and для группировки type и функции. Оператор and также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор only работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.

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.

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" />

@media — CSS | MDN

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 Этот API вышел из употребления и его работа больше не гарантируется. Width of the rendering surface of the output device Deprecated in Media Queries Level 4
device-height Этот API вышел из употребления и его работа больше не гарантируется. Height of the rendering surface of the output device Deprecated in Media Queries Level 4
device-aspect-ratio Этот API вышел из употребления и его работа больше не гарантируется. Width-to-height aspect ratio of the output device Deprecated in Media Queries Level 4
-webkit-device-pixel-ratio
Number of physical device pixels per CSS pixel Nonstandard; WebKit/Blink-specific. If possible, use the resolution media feature instead.
-webkit-transform-3d Are CSS 3D transforms supported? Nonstandard; WebKit/Blink-specific
-webkit-transform-2d Are CSS 2D transforms supported? Nonstandard; WebKit-specific
-webkit-transition Are CSS transitions supported? Nonstandard; WebKit-specific
-webkit-animation Are CSS animations supported? Nonstandard; WebKit-specific

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

 

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


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

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


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


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


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

Mobile First или Desktop First?

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

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

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

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

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


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

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


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

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


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

Адаптивных медиа-запросов о веб-дизайне


Что такое медиа-запрос?

Медиа-запрос — это метод CSS, представленный в CSS3.

Он использует правило @media для включения блока свойств CSS, только если определенное условие верно.

Пример

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

Только экран @media и (max-width: 600 пикселей) {
body {
цвет фона: светло-голубой;
}
}

Попробуй сам »

Добавить точку останова

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

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


Рабочий стол
Телефон

Используйте медиа-запрос, чтобы добавить точку останова на 768px:

Пример

Когда экран (окно браузера) становится меньше 768 пикселей, ширина каждого столбца должна составлять 100%:

/ * Для ПК: * /
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {ширина: 33,33%;}
.col-5 {ширина: 41,66%;}
.col-6 {ширина: 50%;}
.col-7 {ширина: 58,33%;}
.col-8 {ширина: 66,66%;}
.col-9 {ширина: 75%;}
.col-10 {ширина: 83,33%;}
.col-11 {ширина: 91,66%;}
.col-12 {ширина: 100%;}

@media only screen and (max-width: 768px) {
/ * Для мобильных телефонов: * /
[class * = «col-«] {
ширина: 100%;
}
}

Попробуй сам »

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

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

Это означает, что мы должны внести некоторые изменения в наш CSS.

Вместо изменения стилей, когда ширина становится на меньше , чем 768px, мы должны изменить дизайн, когда ширина станет на больше , чем 768 пикселей. Это сделает наш дизайн Mobile First:

Пример

/ * Для мобильных телефонов: * /
[class * = «col-«] {
width: 100%;
}

@media only screen и (min-width: 768px) {
/ * Для ПК: * /
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col- 6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 { width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

Попробуй сам »

Другая точка останова

Вы можете добавить сколько угодно точек останова.

Мы также добавим точку останова между планшетами и мобильными телефонами.

Мы делаем это, добавляя еще один медиа-запрос (на 600 пикселей) и набор новых классов для устройств размером более 600 пикселей. (но меньше 768 пикселей):

Пример

Обратите внимание, что два набора классов почти идентичны, единственное разница в названии ( col- и col-s- ):

/ * Для мобильных телефонов: * /
[class * = «col-«] {
width: 100%;
}

@media only screen и (min-width: 600px) {
/ * Для планшетов: * /
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col- s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66% ;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s- 12 {width: 100%;}
}

@media only screen и (min-width: 768px) {
/ * Для ПК: * /
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col- 6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 { width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

Может показаться странным, что у нас есть два набора идентичных классов, но это дает нам возможность в HTML , чтобы решить, что будет происходить со столбцами в каждом точка останова:

HTML, пример

Для настольных ПК:

И первая, и третья секции будут охватывать по 3 колонки каждая.Средняя часть будет охватывать 6 столбцов.

Для планшетов:

Первый раздел будет охватывать 3 столбца, второй — 9, а третий раздел будет отображаться под первыми двумя разделами и будет охватывать 12 столбцов:





Попробуй сам »

Типичные точки останова устройства

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

Пример

/ * Очень маленькие устройства (телефоны, 600 пикселей и ниже) * /
@ только экран @media и (max-width: 600 пикселей) {…}

/ * Маленькие устройства (планшеты с портретной ориентацией и большие телефоны, 600 пикселей и выше) * /
@media only screen и (min-width: 600px) {…}

/ * Medium devices (альбомные планшеты, 768px и выше) * /
@media only screen and (min-width: 768px) { …}

/ * Большие устройства (ноутбуки / настольные компьютеры, 992 пикселей и выше) * /
@media only screen и (min-width: 992px) {…}

/ * Очень большие устройства (большие ноутбуки и настольные компьютеры, 1200px и выше) * /
@media only screen и (min-width: 1200px) {…}

Попробуй сам »

Ориентация: книжная / альбомная

Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентация браузера.

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

Пример

Веб-страница будет иметь светло-голубой фон, если ориентация находится в альбомном режиме:

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

Попробуй сам »

Скрыть элементы с помощью медиа-запросов

Еще одно распространенное использование медиа-запросов — скрытие элементов на экранах разных размеров:

Я буду скрываться на маленьких экранах.

Пример

/ * Если размер экрана 600 пикселей или меньше, скрыть элемент * /
@media только экран и (max-width: 600px) {
div.example {
дисплей: нет;
}
}

Попробуй сам »

Изменение размера шрифта с помощью медиа-запросов

Вы также можете использовать медиа-запросы для изменения размера шрифта элемента на разные размеры экрана:

Пример

/ * Если размер экрана 601px или больше, установите размер шрифта на 80 пикселей * /
@media only screen и (min-width: 601px) {
div.пример {
размер шрифта: 80 пикселей;
}
}

/ * Если размер экрана 600 пикселей или меньше, установите размер шрифта

на 30 пикселей * /
@media only screen и (max-width: 600px) {
div.example {
размер шрифта: 30 пикселей;
}
}

Попробуй сам »

CSS @media Ссылка

Для полного обзора всех типов и функций / выражений медиа, пожалуйста, посмотрите Правило @media в нашем справочнике CSS.



CSS @media Правило


Пример

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

.

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

Попробуй сам »

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


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

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

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

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

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

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

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


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

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

Имущество
@media 21 9 3,5 4,0 9


Синтаксис CSS

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

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

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

Только

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

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

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

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



….

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

Значение Описание
все По умолчанию. Используется для всех типов носителей
печать Используется для принтеров
экран Используется для экранов компьютеров, планшетов, смартфонов и т. Д.
речь Используется для программ чтения с экрана, которые «читают» страницу вслух

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

Значение Описание
любое наведение Позволяет ли какой-либо доступный механизм ввода пользователю наводить курсор мыши на элементы? (добавлено в Media Queries Level 4)
любой указатель Является ли любой доступный механизм ввода указывающим устройством, и если да, то как это точно? (добавлено в Media Queries Level 4)
соотношение сторон Соотношение ширины и высоты области просмотра
цвет Число битов на компонент цвета для устройства вывода
цветовая гамма Примерный диапазон цветов, поддерживаемых пользовательским агентом и устройство вывода (добавлено в Media Queries Level 4)
индекс цвета Количество цветов, которое может отображать устройство
сетка Является ли устройство сеткой или растровым изображением
высота Высота окна просмотра
наведение Позволяет ли основной механизм ввода пользователю наводить курсор на элементы? (добавлено в Media Queries Level 4)
инвертированные цвета Инвертирует ли цвета браузер или базовая ОС? (добавлено в Медиа Запросы уровня 4)
светлый Текущий уровень внешней освещенности (добавлен в Media Queries Level 4)
максимальное соотношение сторон Максимальное соотношение ширины и высоты области отображения
макс. Цвет Максимальное количество битов на компонент цвета для устройства вывода
max-color-index Максимальное количество цветов, которое может отображать устройство
макс. Высота Максимальная высота области отображения, например окна браузера
макс. Монохромный Максимальное количество битов на «цвет» на монохромном (в оттенках серого) устройстве
максимальное разрешение Максимальное разрешение устройства с использованием dpi или dpcm
макс. Ширина Максимальная ширина области отображения, например окна браузера
мин. Соотношение сторон Минимальное соотношение ширины и высоты области отображения
мин-цвет Минимальное количество бит на компонент цвета для устройства вывода
минимальный индекс цвета Минимальное количество цветов, которое может отображать устройство
мин. Высота Минимальная высота области отображения, например окна браузера
мин-монохромный Минимальное количество бит на «цвет» на монохромном (в оттенках серого) устройстве
мин-разрешение Минимальное разрешение устройства с использованием dpi или dpcm
мин. Ширина Минимальная ширина области отображения, например окна браузера
монохромный Число битов на «цвет» на монохромном (шкале серого) устройстве
ориентация Ориентация области просмотра (альбомный или портретный режим)
блок переполнения Как устройство вывода обрабатывает содержимое, которое выходит за пределы области просмотра вдоль оси блока (добавлено в Media Queries Level 4)
переполнение рядное Можно ли прокручивать содержимое, которое выходит за пределы области просмотра вдоль встроенной оси (добавлено в Media Queries Level 4)
указатель Является ли основным механизмом ввода указывающим устройством, и если да, то как это точно? (добавлено в Media Queries Level 4)
разрешение Разрешение устройства вывода с использованием dpi или dpcm
сканирование Процесс сканирования устройства вывода
скрипты — это скрипты (например,грамм. JavaScript) доступен? (добавлено на уровне медиа-запросов 4)
обновить Как быстро устройство вывода может изменять внешний вид контента (добавлено в Media Queries Level 4)
ширина Ширина области просмотра

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

Пример

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

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

Попробуй сам »

Пример

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

корпус {
фоновый цвет: светло-голубой;
}

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

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

Попробуй сам »

Пример

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

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

Попробуй сам »

Пример

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

/ * На экранах шириной 992 пикселей или меньше переход от четырех столбцов к двум столбцы * /
@media screen и (max-width: 992px) {
.column {
ширина: 50%;
}
}

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

Попробуй сам »

Пример

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

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

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

Попробуй сам »

Пример

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

@media screen {
body {
) цвет: зеленый;
}
}

@media print {
корпус {
цвет: черный;
}
}

Попробуй сам »

Пример

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

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

* /
@media и (max-width: 900px) и (минимальная ширина: 600 пикселей), (минимальная ширина: 1100 пикселей) {
div.пример {
размер шрифта: 50 пикселей;
отступ: 50 пикселей;
граница: сплошной черный цвет 8 пикселей;
фон: желтый;
}
}

Попробуй сам »

Связанные страницы

Учебное пособие по CSS: Медиа-запросы CSS

Учебное пособие по CSS: примеры медиа-запросов CSS

Учебное пособие

RWD: адаптивный веб-дизайн с медиа-запросами

Учебное пособие по JavaScript: метод window.matchMedia ()



Медиа-запросы для стандартных устройств

Если ты думаешь, что отзывчивость — это просто, мне жаль тебя, сынок.У нас 99 окон просмотра, но у iPhone только одно.
— Джош Брюэр, 10 марта 2010 г.

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

Если вы ищете исчерпывающий список медиа-запросов, этот репозиторий — хороший ресурс.

Если вы отреагируете на это: , вы никогда не должны основывать точки останова на устройствах !! Вы подметили. У Джастина Эйвери есть хороший пост о возможных подводных камнях при использовании точек останова для конкретных устройств. Выбор точек останова на основе вашего дизайна, а не конкретных устройств — это разумный способ. Но иногда вам просто нужна небольшая помощь, чтобы взять под контроль одну конкретную ситуацию.

Телефоны и карманные компьютеры

iPhone
  / * ----------- iPhone 4 и 4S ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 480 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 480 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 480 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone 5, 5S, 5C и 5SE ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 568 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 568 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 320 пикселей)
  и (максимальная ширина устройства: 568 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone 6, 6S, 7 и 8 ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 667 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 667 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: портретная) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 667 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone 6+, 7+ и 8+ ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 414 пикселей)
  и (максимальная ширина устройства: 736 пикселей)
  и (-webkit-min-device-pixel-ratio: 3) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 414 пикселей)
  и (максимальная ширина устройства: 736 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 414 пикселей)
  и (максимальная ширина устройства: 736 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- iPhone X ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 812 пикселей)
  и (-webkit-min-device-pixel-ratio: 3) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 812 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 375 пикселей)
  и (максимальная ширина устройства: 812 пикселей)
  и (-webkit-min-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}  
Телефоны Galaxy
  / * ----------- Galaxy S3 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 2) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/ * ----------- Galaxy S4, S5 и Примечание 3 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 320 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- Galaxy S6 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: альбомная) {

}  
Телефоны HTC
  / * ----------- HTC One ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}  
Google Pixel
  / * ----------- Google Pixel ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- Google Pixel XL ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 640 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: альбомная) {

}  
Телефоны Nexus
  / * ----------- Nexus 4 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 384 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 2) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 384 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 384 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 2)
  и (ориентация: альбомная) {

}

/* ----------- Нексус 5 ----------- */

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 3) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 3)
  и (ориентация: альбомная) {

}

/ * ----------- Nexus 6 и 6P ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 4) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 360 пикселей)
  и (высота устройства: 592 пикселей)
  и (-webkit-device-pixel-ratio: 4)
  и (ориентация: альбомная) {

}  
Windows Phone
  / * ----------- Windows Phone ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 480 пикселей)
  and (device-height: 800px) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 480 пикселей)
  и (высота устройства: 800 пикселей)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 480 пикселей)
  и (высота устройства: 800 пикселей)
  и (ориентация: альбомная) {

}  

Ноутбуки

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

  / * ----------- Экраны без Retina ----------- * /
@media экран
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1) {
}

/ * ----------- Экраны Retina ----------- * /
@media экран
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 2)
  и (минимальное разрешение: 192 точек на дюйм) {
}  

Таблетки

iPad
  / * ----------- iPad 1, 2, Mini и Air ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (-webkit-min-device-pixel-ratio: 1) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 1) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 1) {

}

/ * ----------- iPad 3, 4 и Pro 9.7 дюймов ----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 768 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * ----------- iPad Pro 10.5 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 834 пикселей)
  и (максимальная ширина устройства: 1112 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
только экран @media
  и (минимальная ширина устройства: 834 пикселей)
  и (максимальная ширина устройства: 834 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https: // medium.com / connect-the-dots / css-media-query-for-ipad-pro-8cad10e17106 * /
только экран @media
  и (минимальная ширина устройства: 1112 пикселей)
  и (максимальная ширина устройства: 1112 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * ----------- iPad Pro 12.9 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 1024 пикселей)
  и (максимальная ширина устройства: 1366 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https: // medium.com / connect-the-dots / css-media-query-for-ipad-pro-8cad10e17106 * /
только экран @media
  и (минимальная ширина устройства: 1024 пикселей)
  и (максимальная ширина устройства: 1024 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
/ * Объявляем одно и то же значение для минимальной и максимальной ширины, чтобы избежать столкновения с рабочими столами * /
/ * Источник: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/
только экран @media
  и (минимальная ширина устройства: 1366 пикселей)
  и (максимальная ширина устройства: 1366 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}  
Планшеты Galaxy
  / * ----------- Galaxy Tab 2 ----------- * /

/ * Портрет и пейзаж * /
@СМИ
  (минимальная ширина устройства: 800 пикселей)
  and (max-device-width: 1280 пикселей) {

}

/ * Портрет * /
@СМИ
  (максимальная ширина устройства: 800 пикселей)
  и (ориентация: портретная) {

}

/* Пейзаж */
@СМИ
  (максимальная ширина устройства: 1280 пикселей)
  и (ориентация: альбомная) {

}

/ * ----------- Galaxy Tab S ----------- * /

/ * Портрет и пейзаж * /
@СМИ
  (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/ * Портрет * /
@СМИ
  (максимальная ширина устройства: 800 пикселей)
  и (ориентация: портретная)
  и (-webkit-min-device-pixel-ratio: 2) {

}

/* Пейзаж */
@СМИ
  (максимальная ширина устройства: 1280 пикселей)
  и (ориентация: альбомная)
  и (-webkit-min-device-pixel-ratio: 2) {

}  
Планшеты Nexus
  / * ----------- Nexus 7 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 601 пикселей)
  и (высота устройства: 906 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 601 пикселей)
  и (высота устройства: 906 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 601 пикселей)
  и (высота устройства: 906 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: альбомная) {

}

/ * ----------- Nexus 9 ----------- * /

/ * Портрет и пейзаж * /
@media экран
  и (ширина устройства: 1536 пикселей)
  и (высота устройства: 2048 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332) {

}

/ * Портрет * /
@media экран
  и (ширина устройства: 1536 пикселей)
  и (высота устройства: 2048 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: портретная) {

}

/* Пейзаж */
@media экран
  и (ширина устройства: 1536 пикселей)
  и (высота устройства: 2048 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.331)
  и (-webkit-max-device-pixel-ratio: 1.332)
  и (ориентация: альбомная) {

}  
Kindle Fire
  / * ----------- Kindle Fire HD 7 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 800 пикселей)
  и (максимальная ширина устройства: 1280 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: альбомная) {

}

/ * ----------- Kindle Fire HD 8.9 "----------- * /

/ * Портрет и пейзаж * /
только экран @media
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5) {

}

/ * Портрет * /
только экран @media
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: портретная) {
}

/* Пейзаж */
только экран @media
  и (минимальная ширина устройства: 1200 пикселей)
  и (максимальная ширина устройства: 1600 пикселей)
  и (-webkit-min-device-pixel-ratio: 1.5)
  и (ориентация: альбомная) {

}  
Платформа приложений

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

Носимые устройства

  / * ----------- Часы Moto 360 ----------- * /
@СМИ
  (максимальная ширина устройства: 218 пикселей)
  and (max-device-height: 281px) {

}  

css — Медиа-запросы: как настроить таргетинг на настольные компьютеры, планшеты и мобильные устройства?

ИМО это лучшие точки останова:

  @media (min-width: 320px) {/ * смартфоны, iPhone в вертикальной ориентации, телефоны 480x320 в вертикальной ориентации (Android) * /}
@media (min-width: 480 пикселей) {/ * смартфоны, телефоны Android, iPhone с горизонтальной ориентацией * /}
@media (min-width: 600 пикселей) {/ * портретные планшеты, портретные iPad, электронные книги (Nook / Kindle), телефоны с горизонтальной ориентацией 800 x 480 (Android) * /}
@media (min-width: 801px) {/ * планшет, iPad с горизонтальной ориентацией, ноутбуки с низким разрешением и настольные компьютеры * /}
@media (min-width: 1025px) {/ * большие планшеты, ноутбуки и настольные компьютеры с горизонтальной ориентацией * /}
@media (min-width: 1281px) {/ * ноутбуки и настольные компьютеры с высоким разрешением * /}
  

Edit : Улучшено для лучшей работы с 960 сетками:

  @media (min-width: 320px) {/ * смартфоны, iPhone, телефоны с вертикальной ориентацией 480x320 * /}
@media (min-width: 481px) {/ * книжные электронные книги (Nook / Kindle), планшеты меньшего размера с шириной 600 или 640 пикселей.* /}
@media (min-width: 641px) {/ * планшеты с портретной ориентацией, iPad с книжной ориентацией, электронные книги с альбомной ориентацией, телефоны с горизонтальной ориентацией 800 x 480 или 854 x 480 * /}
@media (min-width: 961px) {/ * планшет, iPad с горизонтальной ориентацией, ноутбуки с низким разрешением и настольные компьютеры * /}
@media (min-width: 1025px) {/ * большие планшеты, ноутбуки и настольные компьютеры с горизонтальной ориентацией * /}
@media (min-width: 1281px) {/ * ноутбуки и настольные компьютеры с высоким разрешением * /}
  

На практике многие дизайнеры конвертируют пиксели в em s, в основном потому, что em s обеспечивают лучшее масштабирование.При стандартном масштабировании 1em === 16px , умножьте пиксели на 1em / 16px , чтобы получить em s. Например, 320px === 20em .

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

Независимо от того, предпочитаете ли вы min - , max - или их комбинации, помните о порядке ваших правил, помня, что если несколько правил соответствуют одному и тому же элементу, более поздние правила переопределят более ранние правила.

CSS Media Query для всех мобильных устройств

счастлив, что вы выбрали изучение веб-разработки.

Но ваш путь звучит сложнее, чем есть на самом деле. Во-первых, настольный и мобильный могут быть абсолютно одинаковыми. Он только ведет обратный отсчет до медиа-запросов. На рабочем столе ваш браузер может иметь такую ​​же ширину, как и мобильное устройство. Поэтому вам необходимо уточнить в своем проекте, в какой момент вы хотите показать пользователю «мобильные» стили, а когда — «настольные» стили. В большинстве проектов, которые я работал или видел, медиа-запросы по умолчанию выглядят примерно так:

  @media (min-width: 320 пикселей) {}
@media (минимальная ширина: 768 пикселей) {}
@media (минимальная ширина: 1024 пикселя) {}
@media (минимальная ширина: 1220 пикселей) {}
@media (минимальная ширина: 1440 пикселей) {}
  

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

  @media (min-width: 320px) {} // для общих стилей (как для мобильных, так и для настольных компьютеров)
@media (max-width: 767px) {} // только для стилей от 320 до 768 пикселей (большинство мобильных устройств)
@media (min-width: 768px) {} // общие стили рабочего стола и планшетов при необходимости
@media (min-width: 768px) и (max-width: 1024px) {} // только стили планшета
@media (min-width: 1025px) // начнем со стиля рабочего стола
  

Все эти стили между медиа-запросами привязаны только к размерам.Так что просто выберите нужную ширину, например:

  Все мобильные стили прикреплены только между 320 и 1024 пикселей

@media (min-width: 320px) и (max-width: 1024px) {
  .nav {фон: красный; }
}

Все стили рабочего стола прикреплены только после 1025px
@media (min-width: 1025 пикселей) {
  .nav {фон: зеленый; }
}
  

Все эти медиа-запросы просто показывают разную ширину, вы также можете сделать это по высоте, но это сложнее из-за размеров устройства / дисплея.

Если вы действительно хотите проверить User Agent и разделить его между браузером, агентами, устройствами или чем-то подобным, вам понадобится JavaScript, и это намного сложнее, чем просто отображать стили для разной ширины.

Надеюсь, это вам поможет! Если у вас есть какие-либо вопросы о медиа-запросах и о том, как их правильно писать, MDN — хороший ресурс: MDN — Media Queries

Адаптивный дизайн

— как кодировать медиа-запросы CSS для ВСЕХ мобильных устройств и планшетов?

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

Вместо того, чтобы изначально использовать определенную ширину, или возиться с ориентацией, или другой бессмыслиц, я предлагаю использовать следующий тег мультимедиа …

  @media only screen и (минимальное разрешение: 117 точек на дюйм) и (максимальное разрешение: 119 точек на дюйм), только экран и (минимальное разрешение: 131 точек на дюйм) и (максимальное разрешение: 133 точек на дюйм), только экран и (минимальное разрешение: 145 точек на дюйм) и (максимальное разрешение: 154 точек на дюйм), только экран и (минимальное разрешение: 162 точек на дюйм) и (максимальное разрешение: 164 точек на дюйм), только экран и (минимальное разрешение: 169 точек на дюйм) {
  / * Здесь находится ваш CSS-код для сенсорного ввода * /
}
@media only screen и (минимальное разрешение: 165 точек на дюйм) и (максимальное разрешение: 168 точек на дюйм), только экран и (минимальное разрешение: 155 точек на дюйм) и (максимальное разрешение: 160 точек на дюйм), только экран и (минимальное разрешение: 134 точек на дюйм) и (максимальное разрешение: 144 точек на дюйм), только экран и (минимальное разрешение: 120 точек на дюйм) и (максимальное разрешение: 130 точек на дюйм), только экран и (максимальное разрешение: 116 точек на дюйм) {
  / * Здесь находится ваш CSS-код для конкретного клика * /
}
  

А вы для чего эти теги используете? Для настройки событий наведения и нажатия и касания.

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

Однако должен использовать запросы ширины медиа-ширины. Однако не беспокойтесь о max-device-width, только max-width и min-width.Позвольте указанным выше тегам адресовать ваше прикосновение, а не касаться пользователей, позвольте минимальной и максимальной ширине адресов в зависимости от размера окна и настройте визуальные эффекты .

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

Для просмотра по ширине, сосредоточьтесь на том, чтобы ваш сайт был чистым при разной ширине, не обращая внимания на то, какое устройство на самом деле обращается к нему, просто убедитесь, что ваш экран четко отображается при различных размерах.Это хороший дизайн, который подходит как для настольных компьютеров, так и для мобильных устройств. Если у них есть ваш сайт в небольшом окне в верхнем левом углу экрана для справки (или быстрого отвлечения) при использовании большей части площади экрана в другом месте, и они, а также мобильные пользователи должны меньшая ширина предназначена для. Пробовать что-то еще — это очень болезненный и обреченный на провал путь для веб-разработки. Таким образом, для этой меньшей ширины вы можете установить любую ширину, которую хотите, но я добавлю несколько, которые мне лично нравятся.

Итак, у вас должно получиться что-то вроде этого …

  @media only screen и (минимальное разрешение: 117 точек на дюйм) и (максимальное разрешение: 119 точек на дюйм), только экран и (минимальное разрешение: 131 точек на дюйм) и (максимальное разрешение: 133 точек на дюйм), только экран и (минимальное разрешение: 145 точек на дюйм) и (максимальное разрешение: 154 точек на дюйм), только экран и (минимальное разрешение: 162 точек на дюйм) и (максимальное разрешение: 164 точек на дюйм), только экран и (минимальное разрешение: 169 точек на дюйм) {
    #touch_logo {
       дисплей: наследовать;
    }
    #mouse_logo {
       дисплей: нет;
    }
  / * Здесь находится ваш CSS-код для сенсорного ввода * /
}
@media only screen и (минимальное разрешение: 165 точек на дюйм) и (максимальное разрешение: 168 точек на дюйм), только экран и (минимальное разрешение: 155 точек на дюйм) и (максимальное разрешение: 160 точек на дюйм), только экран и (минимальное разрешение: 134 точек на дюйм) и (максимальное разрешение: 144 точек на дюйм), только экран и (минимальное разрешение: 120 точек на дюйм) и (максимальное разрешение: 130 точек на дюйм), только экран и (максимальное разрешение: 116 точек на дюйм) {
    #touch_logo {
       дисплей: нет;
    }
    #mouse_logo {
       дисплей: наследовать;
    }
  / * Здесь находится ваш CSS-код для конкретного клика * /
}
@media (min-width: 541px) {
  / * Здесь можно найти большой вид.* /
}
@media (max-width: 540px) и (min-width: 400px) {
  / * Здесь размещаются мелкие элементы просмотра. * /
}
@media (max-width: 399 пикселей) {
  / * Здесь можно найти материалы для действительно маленьких представлений. * /
}
  

Хотя, не забудьте включить в шапку страницы следующее:

  
  

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

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

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

Медиа-запросы используются для следующего:

Примечание: Примеры на этой странице используют CSS @media в иллюстративных целях, но основной синтаксис остается одинаковым для всех типов медиа-запросов.

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

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

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

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

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

все
Подходит для всех устройств.
печать
Предназначен для постраничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра. (Информацию о проблемах форматирования, характерных для этих форматов, см. На страничном носителе.)
экран
Предназначен в первую очередь для экранов.
речь
Предназначен для синтезаторов речи.
Устаревшие типы носителей: CSS2.1 и Media Queries 3 определили несколько дополнительных типов носителей ( tty , tv , projection , handheld , Braille , с тиснением и с ушным ), но они устарели в Media Queries 4 и не должны использоваться.Тип слуховой был заменен на речевой , который аналогичен.

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

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

Имя Сводка Банкноты
любое наведение Позволяет ли какой-либо доступный механизм ввода наводить курсор на элементы? Добавлено в Media Queries Level 4.
любой указатель Является ли какой-либо доступный механизм ввода указывающим устройством, и если да, то насколько он точен? Добавлено в медиа-запросы уровня 4.
соотношение сторон Соотношение ширины и высоты области просмотра
цвет Число битов на компонент цвета устройства вывода или ноль, если устройство не цветное
цветовая гамма Приблизительный диапазон цветов, поддерживаемых пользовательским агентом и устройством вывода Добавлено в Media Queries Level 4.
индекс цвета Число записей в поисковой таблице цветов устройства вывода или ноль, если устройство не использует такую ​​таблицу
соотношение сторон устройства Соотношение ширины и высоты устройства вывода Не рекомендуется в запросах СМИ уровня 4.
высота устройства Высота поверхности рендеринга устройства вывода Не рекомендуется в медиа-запросах уровня 4.
ширина устройства Ширина поверхности рендеринга устройства вывода Не рекомендуется в запросах СМИ уровня 4.
режим отображения Режим отображения приложения, как указано в манифесте веб-приложения display member Определено в спецификации манифеста веб-приложения.
принудительные цвета Определить, ограничивает ли пользовательский агент цветовую палитру Добавлено в Media Queries Level 5.
сетка Использует ли устройство сетку или растровый экран?
высота Высота области просмотра
наведение Позволяет ли основной механизм ввода пользователю наводить курсор на элементы? Добавлено в медиа-запросы уровня 4.
инвертированные цвета Инвертирует ли цвета пользовательский агент или базовая ОС? Добавлено в Media Queries Level 5.
монохромный Бит на пиксель в буфере монохромного кадра устройства вывода или ноль, если устройство не монохромное
ориентация Ориентация области просмотра
блок переполнения Как устройство вывода обрабатывает контент, который выходит за пределы области просмотра по оси блока? Добавлено в Media Queries Level 4.
переполнение, рядное Можно ли прокручивать содержимое, которое выходит за пределы области просмотра вдоль встроенной оси? Добавлено в медиа-запросы уровня 4.
указатель Является ли основной механизм ввода указательным устройством, и если да, то насколько он точен? Добавлено в медиа-запросы уровня 4.
предпочитает цветовую схему Определить, предпочитает ли пользователь светлую или темную цветовую схему Добавлено в Media Queries Level 5.
предпочитает контраст Определяет, запросил ли пользователь систему увеличения или уменьшения контрастности между соседними цветами Добавлено в медиа-запросы уровня 5.
предпочитает уменьшенное движение Пользователь предпочитает меньше движения на странице Добавлено в медиа-запросы уровня 5.
разрешение Плотность пикселей устройства вывода
скрипты Определяет, выполняются ли сценарии (т.е.е. JavaScript) доступно Добавлено в медиа-запросы уровня 5.
обновить Как часто устройство вывода может изменять внешний вид контента Добавлено в медиа-запросы уровня 4.
ширина Ширина области просмотра, включая ширину полосы прокрутки

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

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

и

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

не

Оператор not используется для отрицания медиа-запроса, возвращая истину, если в противном случае запрос вернул бы ложь.Если он присутствует в списке запросов, разделенных запятыми, он будет отрицать только конкретный запрос, к которому он применяется. Если вы используете оператор , а не , также должен указать тип носителя.

Примечание: На уровне 3 ключевое слово , а не нельзя использовать для отрицания отдельного выражения мультимедийной функции, только для всего мультимедийного запроса.

только

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

, (запятая)

Запятые используются для объединения нескольких медиа-запросов в одно правило. Каждый запрос в списке, разделенном запятыми, обрабатывается отдельно от других.Таким образом, если какой-либо из запросов в списке верен, весь оператор мультимедиа возвращает истину. Другими словами, списки ведут себя как логические операторы или .

Типы носителей описывают общую категорию данного устройства. Хотя веб-сайты обычно разрабатываются с учетом экранов, вы можете создать стили, ориентированные на специальные устройства, такие как принтеры или программы чтения с экрана на основе звука. Например, этот CSS нацелен на принтеры:

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

  @media screen, print {...}  

Список всех типов носителей см. В разделе «Типы носителей». Поскольку они описывают устройства очень широко, доступны лишь некоторые из них; для нацеливания на более конкретные атрибуты используйте вместо этого медиа-функции .

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

  @media (hover: hover) {...}  

Многие медиа-функции — это , диапазон , что означает, что они могут иметь префикс «min-» или «max-» для выражения ограничений «минимального условия» или «максимального условия». Например, этот CSS будет применять стили только в том случае, если ширина области просмотра вашего браузера равна или меньше 12450 пикселей:

  @media (max-width: 12450px) {...}  

Если вы создаете запрос мультимедийной функции без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю (или нет на уровне 4). Например, этот CSS будет применяться к любому устройству с цветным экраном:

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

  @media speech and (соотношение сторон: 11/5) {...}  

Дополнительные примеры мультимедийных функций см. На справочной странице для каждой конкретной функции.

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

В предыдущем примере мы уже видели операторы и , используемые для группировки носителя типа с функцией носителя .Оператор и также может объединить несколько мультимедийных функций в один мультимедийный запрос. Оператор , а не , тем временем, отрицает медиа-запрос, в основном меняя его обычное значение. Оператор only не позволяет более старым браузерам применять стили.

Примечание: В большинстве случаев тип носителя все используется по умолчанию, если другой тип не указан. Однако, если вы используете операторы , а не или , только операторы , вы должны явно указать тип носителя.

Объединение нескольких типов или функций

Ключевое слово и объединяет функцию мультимедиа с типом носителя или другими функциями мультимедиа. В этом примере объединены две мультимедийные функции, чтобы ограничить стили для устройств с альбомной ориентацией и шириной не менее 30 ems:

  @media (min-width: 30em) и (ориентация: альбомная) {...}  

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

  @media screen и (min-width: 30em) и (ориентация: альбомная) {...}  

Тестирование для нескольких запросов

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

  @media (min-height: 680px), экран и (ориентация: книжная) {...}  

В приведенном выше примере, если у пользователя есть принтер с высотой страницы 800 пикселей, оператор мультимедиа вернет истину, потому что будет применяться первый запрос.Точно так же, если бы пользователь находился на смартфоне в портретном режиме с высотой области просмотра 480 пикселей, будет применяться второй запрос, и оператор мультимедиа все равно вернет истину.

Инвертирование значения запроса

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

  @media not all and (монохромный) {...}
  

… так что вышеупомянутый запрос оценивается так:

  @media not (all and (монохромный)) {...}
  

… а не так:

  @media (не все) и (монохромный) {...}  

В качестве другого примера приведем следующий медиа-запрос:

  @media not screen and (color), print and (color) {...}
  

… оценивается так:

  @media (not (screen and (color))), print and (color) {...}  

Улучшение совместимости со старыми браузерами

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

  @media only screen and (color) {...}
  

Спецификация Media Queries Level 4 включает некоторые улучшения синтаксиса, чтобы сделать медиа-запросы с использованием функций, которые имеют тип «диапазон», например ширину или высоту, менее подробными.Уровень 4 добавляет контекст диапазона для написания таких запросов. Например, используя функциональность max- для ширины, мы можем написать следующее:

Примечание: Спецификация Media Queries Level 4 имеет разумную поддержку в современных браузерах, но некоторые мультимедийные функции не поддерживаются должным образом. См. Более подробную информацию в таблице совместимости браузеров @media .

  @media (макс. Ширина: 30 мкм) {...}  

В Media Queries Level 4 это можно записать как:

  @media (ширина <= 30em) {...}  

Используя min- и max- , мы можем проверить ширину между двумя значениями, например:

  @media (min-width: 30em) и (max-width: 50em) {...}  

Это преобразовало бы в синтаксис уровня 4 как:

  @media (30em <= width <= 50em) {...}
  

Media Queries Level 4 также добавляет способы объединения медиа-запросов с использованием полной логической алгебры с и , не и или .

Отрицание признака с

not

Использование not () вокруг мультимедийного объекта отменяет этот признак в запросе. Например, not (hover) будет соответствовать, если у устройства нет возможности зависания:

  @media (not (hover)) {.		

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

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