WEB start

Компьютеры. Интернет. Заочное профессиональное обучение. 055-966-10-17

hit 
counter

Обучение

Широкий спектр программ и различных форм обучения

Возможность заочного, дистанционного обучения 055-966-10-17
  • Программирование. Современные языки и технологии.
  • Обслуживание персональных компьютеров.
  • Компьютерные сети. Защита информации.
  • Интернет. Планирование, создание WEB-сайтов. Дизайн, программирование. CEO, продвижение сайтов в интернет.
  • Основы современных IT - технологий.

Наши преимущества

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


Регистрация на сайте

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 Любые устройства.
print Устройства печати.
screen Экран компьютера, таблета, мобильного телефона.
speech Устройства чтения экрана, которые озвучивают текст.
handheld
Наладонники.
projection
Проекторы.
printПринтеры.


Свойства устройств (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 } }