пример
Измените цвет фона, если видовой экран имеет ширину 480 пикселей или шире:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Правило @media используется для определения различных правил стилей для различных медиа-типов / устройств.
В CSS2 это называлось типов носителей, в то время как в CSS3 он называется медиазапросы.
Медиазапросы смотреть на возможности устройства, и может быть использован для проверки многих вещей, таких как:
- ширина и высота окна просмотра
- ширина и высота устройства
- ориентация (is the tablet/phone in landscape or portrait mode?)
- разрешающая способность
- и многое другое
Поддержка браузеров
Числа в таблице определяет первую версию браузера, который полностью поддерживает правила @media.
| Имущество | |||||
|---|---|---|---|---|---|
| @media | 21 | 9 | 3.5 | 4.0 | 9 |
CSS Синтаксис
@media not|onlymediatype and (media feature){
CSS-Code;
}Вы также можете иметь различные таблицы стилей для различных сред:
<link rel="stylesheet" media=" mediatype and|not|only ( media
feature )"
href=" mystylesheet.css ">Типы носителей
| Стоимость | Описание |
|---|---|
| all | Используется для всех устройств типа медиа |
| aural | Устаревшее. Используется для передачи речи и звуковых синтезаторов |
| braille | Устаревшее. Используется для Брайля тактильных устройств обратной связи |
| embossed | Устаревшее. Используется для страничных принтеров Брайля |
| handheld | Устаревшее. Используется для небольших или портативных устройств |
| Используется для принтеров | |
| projection | Устаревшее. Используется для проецируемых презентаций, как слайды |
| screen | Используется для компьютерных экранов, планшетов, смартфонов и т.д. |
| speech | Используется для экранных дикторов , что "reads" страницу вслух |
| tty | Устаревшее. Используется для носителей, использующих сетку символов фиксированного шага, как телетайп и терминалы |
| tv | Устаревшее. Используется для устройств типа телевизора |
СМИ Особенности
| Стоимость | Описание |
|---|---|
| aspect-ratio | Соотношение между шириной и высотой окна просмотра |
| color | Количество бит на компонент цвета для устройства вывода |
| color-index | Количество цветов, устройство может отображать |
| device-aspect-ratio | Соотношение между шириной и высотой устройства |
| device-height | Высота устройства, такие как экран компьютера |
| device-width | Ширина устройства, такие как экран компьютера |
| grid | Будет ли устройство сетки или растрового изображения |
| height | Высота окна просмотра |
| max-aspect-ratio | Максимальное отношение между шириной и высотой области отображения |
| max-color | Максимальное количество бит на компонент цвета для устройства вывода |
| max-color-index | Максимальное количество цветов устройство может отображать |
| max-device-aspect-ratio | Максимальное отношение между шириной и высотой устройства |
| max-device-height | Максимальная высота устройства, такие как экран компьютера |
| max-device-width | Максимальная ширина устройства, такие как экран компьютера |
| max-height | Максимальная высота области отображения, такие как окно браузера |
| max-monochrome | Максимальное число битов на "color" на монохромном (greyscale) устройства |
| max-resolution | Максимальное разрешение устройства, с помощью точек на дюйм или ДИКМ |
| max-width | Максимальная ширина области отображения, такие как окно браузера |
| min-aspect-ratio | Минимальное соотношение между шириной и высотой области отображения |
| min-color | Минимальное количество бит на компонент цвета для устройства вывода |
| min-color-index | Минимальное количество цветов, устройство может отображать |
| min-device-aspect-ratio | Минимальное соотношение между шириной и высотой устройства |
| min-device-width | Минимальная ширина устройства, такие как экран компьютера |
| min-device-height | Минимальная высота устройства, такие как экран компьютера |
| min-height | Минимальная высота области отображения, такие как окно браузера |
| min-monochrome | Минимальное количество битов на "color" на монохромном (greyscale) устройства |
| min-resolution | Минимальное разрешение устройства, с помощью точек на дюйм или ДИКМ |
| min-width | Минимальная ширина области отображения, такие как окно браузера |
| monochrome | Число битов на "color" на монохромном (greyscale) устройства |
| orientation | Ориентация видового экрана (landscape or portrait mode) |
| overflow-block | Как содержание ручки вывода устройство , которое переполняет окно просмотра вдоль оси блока (added in Media Queries Level 4) |
| overflow-inline | Может ли содержание , которое перетекает в иллюминатор вдоль оси инлайн прокручиваться (added in Media Queries Level 4) - (added in Media Queries Level 4) |
| resolution | Разрешение устройства вывода, с помощью точек на дюйм или ДИКМ |
| scan | Процесс сканирования устройства вывода |
| update-frequency | Как быстро может выходное устройство изменять внешний вид контента (added in Media Queries Level 4) |
| width | Ширина окна просмотра |
Еще примеры
пример
Используйте правило @media, чтобы сделать адаптивный дизайн:
@media only screen and (max-width: 500px) {
.gridmenu
{
width:100%;
}
.gridmain
{
width:100%;
}
.gridright {
width:100%;
}
}
Попробуй сам " Похожие страницы
Учебник CSS: CSS Media Queries