САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб шрифты CSS Анимации CSS Длины CSS Конвертер px-em CSS Названия цвета CSS Значения цвета CSS по умолчанию CSS Символы

CSS Свойства

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing caption-side caret-color @charset clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-size-adjust font-stretch font-style font-variant font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap writing-mode z-index



На сайте нет рекламы

СSS Свойство СSS3 Правило @media


Пример

Изменить цвет фона элемента <body> на "lightblue", когда окно браузера будет иметь ширину 600 пикселей или меньше:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
Редактор кода »

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

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

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

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

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

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

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


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

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

Свойство
@media 21 9 3.5 4.0 9


CSS Синтаксис

@media not|only mediatype и (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

значение слова not, only и and ключевое слово:

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

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

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

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

Вы также можете иметь разные stylesheets для различных мультимедиа носителей, как это:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Media Types

Значение Описание
all По умолчанию. Используется для всех устройств типа носитель
print Используется для принтеров
screen Использованный для экранов компьютера, планшетов, смарт-телефонов и т.д.
speech Используется для чтения с экрана, который "читает" страницу вслух

Мультимедийные возможности

Значение Описание
any-hover Позволяет ли какой-либо доступный механизм ввода пользователю наводить курсор на элементы? (добавлено в Медиа запросы Уровень 4)
any-pointer Является ли какой-либо доступный механизм ввода указательным устройством, и если да, то насколько он точен? (добавлено в Медиа запросы Уровень 4)
aspect-ratio Соотношение между шириной и высотой окна просмотра
color Количество бит на цветовой компонент для устройства вывода
color-gamut Приблизительный диапазон цветов, поддерживаемых агентом пользователя и устройством вывода (добавлено в Медиа запросы Уровень 4)
color-index Количество цветов, которые может отображать устройство
grid Является ли устройство сеткой или растровым изображением
height Высота области просмотра
hover Позволяет ли основной механизм ввода пользователю наводить курсор на элементы? (добавлено в Медиа запросы Уровень 4)
inverted-colors Является ли браузер или базовая ОС инвертирующими цветами? (добавлено в Медиа запросы Уровень 4)
light-level Текущий уровень рассеянного света (добавлен в Медиа запросы Уровень 4)
max-aspect-ratio Максимальное соотношение между шириной и высотой экрана
max-color Максимальное количество бит на цветовой компонент для устройства вывода
max-color-index Максимальное количество цветов, которое может отображать устройство
max-height Максимальная высота области отображения, например окна браузера
max-monochrome Максимальное количество бит на "color" на monochrome (в оттенках серого) устройстве
max-resolution Максимальное разрешение устройства, используя dpi или dpcm
max-width Максимальная ширина области отображения, например окна браузера
min-aspect-ratio Минимальное соотношение между шириной и высотой области отображения
min-color Минимальное количество бит на цветовой компонент для устройства вывода
min-color-index Минимальное количество цветов, которое может отображать устройство
min-height Минимальная высота области отображения, например окна браузера
min-monochrome Минимальное количество бит на "color" на monochrome (в оттенках серого) устройстве
min-resolution Минимальное разрешение устройства, используя dpi или dpcm
min-width Минимальная ширина области отображения, например окна браузера
monochrome Количество бит на "цвет" на монохромном (в оттенках серого) устройстве
orientation ориентация области просмотра экрана (альбомный или книжный режим)
overflow-block Как устройство вывода обрабатывает содержимое, которое переполняет область просмотра экрана вдоль оси блока (добавлен в Медиа запросы Уровень 4)
overflow-inline Можно ли прокручивать содержимое, которое переполняет область просмотра экрана вдоль встроенной оси (добавлен в Медиа запросы Уровень 4)
pointer Является ли основной входной механизм указательным устройством, и если да, то насколько он точен? (добавлен в Медиа запросы Уровень 4)
resolution Разрешение устройства вывода, используя dpi или dpcm
scan Процесс сканирования выходного устройства
scripting Доступен ли сценарий (например, JavaScript)? (добавлен в Медиа запросы Уровень 4)
update Как быстро устройство вывода может изменить внешний вид содержимого (добавлен в Медиа запросы Уровень 4)
width Ширина области просмотра экрана

Примеры

Пример

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

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}
Редактор кода »

Пример

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

body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}
Редактор кода »

Пример

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

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
Редактор кода »

Пример

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

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

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

Пример

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

Редактор кода »

Пример

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

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

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}
Редактор кода »

Пример

С помощью запросов мультимедиа можно задать зеленый цвет текста при отображении документа на экране и черный при печати:

@media screen {
  body {
    color: green;
  }
}

@media print {
  body {
    color: black;
  }
}
Редактор кода »

Пример

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

/* Если ширина находится между 600px и 900px или выше 1100px - измените внешний вид <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
Редактор кода »

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

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

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

RWD Учебник: Адаптивный веб-дизайн с Медиа запросами

JavaScript Учебник: Метод window.matchMedia()