При создании адаптивных веб-дизайнов наиболее часто используемые медиазапросы касаются ширины областей просмотра устройств (width) и ширины экранов устройств (device-width). По своему опыту могу сказать, что с необходимостью проверять другие характеристики я сталкивался редко. Однако на тот случай, если в этом все же возникнет необходимость, приведу список всех характеристик, которые позволяют проверять медиазапросы. Надеюсь, некоторые из них заинтересуют вас.
width — ширина области просмотра.
height — высота области просмотра.
device-width — ширина поверхности, на которой происходит визуализация (для нас это ширина экрана устройства).
device-height — высота поверхности, на которой происходит визуализация (для нас это высота экрана устройства).
orientation — ориентация экрана устройства (книжная или альбомная).
aspect-ratio — соотношение ширины и высоты в зависимости от ширины и высоты области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как aspect-ratio: 16/9.
device-aspect-ratio — аналогична aspect-ratio, однако базируется на ширине и высоте поверхности устройства, на которой происходит визуализация, а не на ширине и высоте области просмотра.
color — количество бит на каждый из цветовых компонентов. Например, m i n — color: 16 будет означать, что экран конкретного устройства имеет 16-битную глубину цвета.
color-index — количество записей в таблице подстановки цветов. Значения должны быть числовыми и не могут быть отрицательными.
monochrome — характеристика позволяет узнать, сколько бит приходится на каждый пиксел в буфере монохромных кадров. Значение должно быть числом (целым), например monochrome: 2, и не может быть отрицательным.
resolution — может использоваться для того, чтобы узнать разрешение экрана или печати, например min-resolution: 300dpi. Значения также могут указываться в точках на сантиметр, например min-resolution: 118dpcm.
scan — позволяет узнать тип развертки: прогрессивная или чересстрочная, и все это в основном относится к телевизорам. Например, нацелиться на устройства, представляющие собой HD-телевизоры с разрешением 720p (буквар означает progressive, то есть «прогрессивная развертка»), можно, указав scan: progressive, а на устройства, которые являются HD-телевизорами с разрешением 1080i (буква i здесь означает interlaced, то есть «чересстрочная развертка»), — указав scan: interlace.
grid — позволяет узнать, относится ли определенное устройство к устройствам с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.
Все вышеуказанные характеристики за исключением scan и grid могут снабжаться префиксом min или max для задания диапазонов. Взгляните, например, на следующий фрагмент кода:
@import url("phone. css") screen and (min-width:200px) and (max-width:360px);
Здесь минимум (min) и максимум (max) были установлены в медиазапросе width для задания диапазона. Файл phone. css будет импортироваться, только когда речь будет идти об устройствах с экраном с минимальной шириной области просмотра 200 пикселов и максимальной шириной области просмотра 360 пикселов.
Добавить комментарий