Media screen and only screen and: CSS3-медиазапросы

Адаптивный дизайн на основе медиа-запросов / Блог компании Google Developers / Хабр

Содержание

Уровень подготовки веб-мастера: средний/высокий

Нам нравится работать с данными. Мы уделяем много времени изучению аналитической информации о наших веб-сайтах. Любой веб-разработчик, которому это тоже интересно, наверняка заметил, насколько увеличился в последнее время объем трафика с мобильных устройств. За последний год значительно вырос процент просмотров страниц наших основных сайтов со смартфонов и планшетных ПК. Это значит, что все больше посетителей используют устройства с современными браузерами, поддерживающими последние версии HTML, CSS и JavaScript. Однако ширина экранов таких устройств обычно ограничена 320 пикселями.

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

  1. четкое отображение страниц на экране с любым разрешением;
  2. возможность просмотра группы контента на любом устройстве;
  3. отсутствие горизонтальной полосы прокрутки независимо от размера окна.



Изменяется расположение контента, навигация и масштаб изображений – Хромбуки
Реализация

Начнем с того, что семантическая разметка содержания упрощает перекомпоновку страниц в случае необходимости. С помощью таблицы стилей мы создали резиновый макет. Это первый шаг на пути к достижению нашей цели. Вместо атрибута 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% случаев при посещении сайтов используются компьютерные браузеры, которые еще не поддерживают данную технологию. Наличие таких запросов влияет на эффективность их работы. А если на сайте есть виджет, с которым удобно работать с помощью мыши, вовсе не факт, что он будет столь же удобен на сенсорном экране, где сложнее выполнять точные действия.

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

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

Другие примеры адаптивного веб-дизайна в 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

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

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

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
Подходит для всех устройств.
print
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
screen
Предназначен в первую очередь для цветных компьютерных экранов.
speech
Предназначен для синтезаторов речи.
Примечание: CSS2.1 и Media Queries 3 определили несколько дополнительных зачений (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 transforms supported? Nonstandard; WebKit/Blink-specific
-webkit-transform-2d Are CSS 2D transforms supported? Nonstandard; WebKit-specific
-webkit-transition Are CSS transitions supported? Nonstandard; WebKit-specific
-webkit-animation Are CSS animations supported? Nonstandard; WebKit-specific

Примеры

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

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

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

Особенность 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 - В чем разница между «экраном» и «только экраном» в медиа-запросах?
Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру
,

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 и

Переполнение стека
  1. Товары
  2. Клиенты
  3. Случаи использования
  1. Переполнение стека Публичные вопросы и ответы
  2. Команды Частные вопросы и ответы для вашей команды
  3. предприятие Частные вопросы и ответы для вашего предприятия
  4. работы Программирование и связанные с ним технические возможности карьерного роста
  5. Талант Нанимать технический талант
  6. реклама Связаться с разработчиками по всему миру

Загрузка…

,

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 пикселей в ширину или меньше, установите размер шрифта

на 30px * /
@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.

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


,

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

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