CSS2 Введенный Типы носителей
@media Правило, введено в CSS2, дало возможность определить различные правила стилей для различных типов носителей.
Примеры: Вы можете иметь один набор правил стиля для компьютерных экранов, один для принтеров, один для портативных устройств, для устройств типа телевизора, и так далее.
К сожалению, эти типы носителей никогда не получал много поддержки со стороны устройств, отличных от типа носителя для печати.
CSS3 Media Queries представляет
Медиа-запросы в CSS3 расширяют CSS2 медиатипами идею: Вместо того чтобы искать типа устройства, они смотрят на возможности устройства.
запросы СМИ могут быть использованы для проверки многих вещей, таких как:
- ширина и высота окна просмотра
- ширина и высота устройства
- ориентация (это планшет / телефон в ландшафтном или портретном режиме?)
- разрешающая способность
Использование медиа-запросы являются популярным методом для доставки подогнанный таблицы стилей таблетки, iPhone и андроидов.
Поддержка браузеров
Числа в таблице определяет первую версию браузера, который полностью поддерживает правила @media.
| Имущество | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Медиа Синтаксис запросов
Медиа-запрос состоит из типа носителя и может содержать одно или несколько выражений, которые разрешают к истинным или ложным.
@media not|onlymediatype and (expressions) {
CSS-Code;
}Результат запроса верно, если указанный тип носителя соответствует типу устройства документ отображается на и все выражения в запросе медиа являются истинными. Если запрос СМИ верно, то соответствующие таблицы стилей или стиля применяются правила, в соответствии с обычными правилами каскадирования.
Если вы не использовать не или только операторы, тип носителя не является обязательным , и all тип будет подразумеваться.
Вы также можете иметь различные таблицы стилей для различных сред:
<link rel="stylesheet" media=" mediatype and|not|only ( expressions )"
href=" print.css ">Типы CSS3 Медиа
| Стоимость | Описание |
|---|---|
| all | Используется для всех устройств типа медиа |
| Используется для принтеров | |
| screen | Используется для компьютерных экранов, планшетов, смартфонов и т.д. |
| speech | Используется для экранных дикторов, что "читает" страницу вслух |
Медиазапросы Простые примеры
Одним из способов использования медиа запросов, чтобы иметь альтернативный раздел CSS прямо в таблицу стилей.
Следующий пример изменяет background-color для LIGHTGREEN если видовой экран составляет 480 пикселей в ширину или шире (если видовой экран меньше , чем 480 пикселей, background-color будет розовый):
пример
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Попробуй сам " В следующем примере показано меню, которое будет всплывать к левой части страницы, если видовой экран составляет 480 пикселей в ширину или шире (если видовой экран меньше 480 пикселов, то меню будет на верхней части содержания):
пример
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left:216px;}
}
Попробуй сам " CSS3 @media Ссылка
Полный обзор типов всех средств массовой информации и функций / выражений, пожалуйста , посмотрите на @media правила в нашем справочнике CSS.