WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Наши преимущества
- Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
- Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
- Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
- Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.
Регистрация на сайте
css3 media queries
CSS Media Queries
В спецификации CSS3 введены медиа-звпросы.
Наряду с HTML тегом <meta name="viewport" ... > - это удобный и гибкий мехпнизм для создания сайтов с адаптивным дизайном.
Медиа-запросы позволяют модифицировать CSS таблицы стилей для разных устройств, HTML тег META с параметрами типа:
<meta name="viewport" content="width=device-width, initial-scale=1">
Позволяет задать некоторые параметры отображения сайта на разных устройствах (начальное увелечение - zoom, соотношение физических рикселей экрана устройства к CSS пикселям и тд).
В атрибуте контент ( content) можно задавать параметры:
| Параметр | Описание |
|---|---|
| width | Ширина экрана (виртуальная). Может быть задана в CSS пикселях (width=600) или равной физически возможному разрешению экрана устройства (width=device-width) |
| device-width | Ширина экрана (физическая) |
| height | Высота (длина) экрана (логическая, виртуальная) |
| device-height | Высота (длина) экрана (физическая) |
| initial-scale | Начальное увеличение (zoom) для странички на экране устройства. 1.0 - нет увеличения. |
| minimum-scale | Минимальное увеличение, доступное пользьзователю. |
| maximum-scale | Минимальное увеличение, доступное пользьзователю. |
| user-scalable | Разрешено или запрещено пользователю увеличивать (уменьшать) страничку. Может быть yes или no. |
При задании ширины экрана для устройства вывода нужно иметь в виду, что CSS пиксели (логические пиксели) не соответствуют физическим пикселям (разрешающая способность экрана). Для мобильных устройств эти параметры сильно отличаются.
Подробнее, для разных устройств, можно посмотреть, например, здесь: http://viewportsizes.com/
Медиа-запросы в CSS3 расширили идею медиа-типов CSS2: вместо того, чтобы определять тип устройства, в CSS3 определяются параметры устройства.
Такие как:
- ширина и высота окна просмотра
- ширина и высота устройства
- ориентация (это планшет / телефон в альбомном или портретном режиме?)
- разрешающая способность
Использование медиа-запросов - это удобный, популярный метод корректировки CSS стилей для различных устройств: настольные компьютеры, ноутбуки, планшеты и мобильные телефоны (например, телефоны iPhone и Android).
Медиа-запрос состоит из типа носителя и может содержать одно или несколько выражений, которые принимают значения true, либо false.
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}
@media - директива: медиа-запрос ( совместно с ней также может использоваться CSS диретива @support, которая позволяет проверить, поддерживает ли браузер те или иные CSS свойства )
mediatype - тип устройства
mediafeature - набор логических выражений, состоящий из описаний свойств устройств, связанных длгическими операторами and, not, or.
Результат запроса истинен, если:
указанный тип носителя соответствует типу устройства, на котором отображается документ
все выражения в запросе на мультимедиа являются истинными.
Когда медиа-запрос является истинным, применяются соответствующие таблицы стилей или правила стилей.
Если не использутся операторы not или only, тип носителя можно не указывать (подразумевается: все типы).
Иакже можно задать разные таблицы стилей для разных носителей:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="/print.css">
CSS3 - некоторые типы устройств (CSS3 media types)
| Тип устройства (media type) | Описание |
|---|---|
| all | Любые устройства. |
| Устройства печати. | |
| screen | Экран компьютера, таблета, мобильного телефона. |
| speech | Устройства чтения экрана, которые озвучивают текст. |
| handheld | Наладонники. |
| projection | Проекторы. |
| Принтеры. |
Свойства устройств (CSS3 media features)
Синтаксически мультимедиа-свойства напоминают свойства CSS: они имеют имена и принимают определенные значения. Однако есть несколько важных различий между свойствами и средствами массовой информации::
- Свойства CSS используются в объявлениях для предоставления информации о том, как представить документ. Свойства мультимедиа-устройств используются в выражениях для описания требований к устройству вывода.
- Большинство мультимедиа-свойств принимают необязательные ‘min-’ или ‘max-’ префиксы для того, чтобы задать константы "больше или равно" и "меньше или равно". Этот синтаксис используется, чтобы избежать символов "<" и ">" которые могут вступать в конфликт с HTML и XML. Те свойства, которые допускают префиксы, чаще всего (но не обязательно) используются с префиксами.
- Свойства CSS всегда требуют значения для формирования объявления. С другой стороны, свойства мультимедиа могут использоваться и без значений. В случае иультимедиа-свойств, выражение (свойство) будет принимать значение true, если (свойство: x) будет принимать значение true для значения x, отличного от нуля или нуля, за которым следует идентификатор единицы измерения (то есть - любое, кроме 0, 0px, 0em и т. Д. ). Те multimedia - свойства, которые описаны с префиксом min / max, не могут использоваться без конкретного значения.
- Свойства CSS могут принимать более сложные значения, например, вычисления, которые включают в себя несколько других значений. Media-свойства могут иметь только единственное значение: одно ключевое слово, одно число или число с единицей измерения. (Исключение составляют ‘aspect-ratio’ и ‘device-aspect-ratio’ )
Например, медиа-свойство «color» может формировать выражения без значения (‘(color)’) или со значением (‘(min-color: 1)’).
| Свойство | Описание | Пример |
| width | Описывает ширину области отображения устройства. Для непрерывных носителей это ширина окна просмотра , включая размер отображаемой полосы прокрутки (если есть). Для постраничных носителей это ширина окна страницы. Значение не может быть отрицательным. Допускает префиксы min/max |
Например, этот мультимедийный запрос определяет, что таблица стилей применится для печати на устройстве вывода, ширина которого более 25 см: <link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" /> Этот мультимедийный запрос задаёт, что таблицу стилей нужно использовать для устройств? у которых viewport (часть экрана / бумаги, где отображается документ) шириной от 400 до 700 пикселей: @media screen and (min-width: 400px) and (max-width: 700px) { … } Этот мультимедийный запрос определяет устройства, для которых viewport больше 20em. @media all and (min-width: 20em) |
| height | Описывает длину целевой области отображения устройства вывода. Для непрерывных носителей это высота окна просмотра, включая размер отображаемой полосы прокрутки (если есть). Для постраничных носителей это высота окна страницы. Указанная <длина> не может быть отрицательной. Допускает префиксы min/max |
@media screen and (height: 800px) { … } |
| device-height | высота (длмна) поверхности рендеринга устройства. Значение свойства height не всегда равно значению device-height. Это зависит от зарактеристик конкретного устройства (логический - CSS пиксель может не соответствовать физическому пикселю устройства). В последние годы физическое разрешение экрана современных устройств увеличилось до такого размера, что отдельные пиксели неразличимы для человеческого глаза. Например, последние смартфоны обычно имеют 5-дюймовые экраны с разрешением выше 1920-1080 пикселей (~ 400 точек на дюйм). Из-за этого многие браузеры могут отображать свои страницы в меньшем физическом размере, использую несколько аппаратных пикселей для каждого пикселя CSS. HTML tag meta позволяет задать параметр width=device-width <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| device-width | ширина поверхности рендеринга устройства вывода. Для сплошных носителей это ширина экрана. Для постраничного носителя это ширина размера листа страницы. | @media screen and (device-width: 800px) { … } В приведенном выше примере таблица стилей будет применяться только к экранам, на которых в настоящее время отображается ровно 800 горизонтальных пикселей. Единица «px» здесь - логический пиксель |
| orientation |
Принимает заначение portrait, если для этого устройства height больше или равна width. В противном случае - landscape. Значение не может быть отрицательным. |
Эта директива описывает стили для любых типов устройств (all) с вертикальной ориентацией экрана. @media all and (orientation:portrait) { … } |
| aspect-ratio |
Отношение значения свойства width к значению свойства height Допускает префиксы min/max |
|
| device-aspect-ratio |
Отношение значения свойства device-width к значению свойства device- height |
@media screen and (device-aspect-ratio: 1280/720) { … } |
| color | Количество битов, которое устройство использует для обозначения увета. Для монохромных устройств color = 0 Допускает префиксы min/max | Все устройства с цветным экраном: @media all and (color) { … } |
| color-index | количество записей в таблице поиска цветов устройства вывода Допускает префиксы min/max | media="all and (min-color-index: 256)" Те устройства, у которых 256 цветов |
| monochrome | количество бит на пиксель в монохромном буфере кадров. Если устройство не является монохромным устройством, значение будет равно 0. | В примере одна таблица стилей определяется для цветных, а другая - для монохромных устройств: <link rel="stylesheet" media="print and (color)" href="http://…" /> <link rel="stylesheet" media="print and (monochrome)" href="http://…" /> |
| resolution | Разрешение - плотность пикселей для устройства. | @media print and (min-resolution: 300dpi) { … } @media print and (min-resolution: 118dpcm) { … } |
| scan | процесс сканирования выходных устройств «ТВ». | Например, этот мультимедийный запрос задаёт, что таблица стилей - для устройств с прогрессивной разверткой (progressive scan): @media tv and (scan: progressive) { … } |
| grid | Свойств используется для запроса устройства, является ли оно точечным или графическим (grid или bitmap ). Если выходное устройство основано на сетке (например, терминал «tty» или дисплей телефона с одним фиксированным шрифтом), значение будет равно 1. В противном случае значение будет равно 0. Только 0 и 1 являются допустимыми значениями. @media handheld and (grid) and (max-width: 15em) { … } | |
Примеры
CSS - диреrтивы @media и @support могут быть размещены на одном уровне кода или вложены.
/* Расположено в самой программе */
@media screen and (min-width: 900px) {
article {
padding: 1rem 3rem;
}
}
/* Вложено в другую директиву */
@supports (display: flex) {
@media screen and (min-width: 900px) {
article {
display: flex;
}
}
}
@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-width: 320px)
and (max-width: 480px)
and (resolution: 150dpi) {
body { line-height: 1.4; }
}
@media print { body { font-size: 10pt } }
@media screen { body { font-size: 13px } }
@media screen, print {
body { line-height: 1.2 }
}