CSS Media Queries и адаптивный дизайн

Как работать с медиа-запросами в CSS для создания адаптивных веб-страниц

В этом посте я сначала расскажу о типах мультимедиа и дескрипторах мультимедийных функций, а затем объясню мультимедийные запросы.

Типы медиа

Типы мультимедиа, используемые в медиа-запросах и объявлениях @import, позволяют нам определить, на каком носителе загружается файл CSS или фрагмент CSS.

У нас есть следующиетипы медиа

  • allозначает все СМИ
  • printиспользуется при печати
  • screenиспользуется, когда страница отображается на экране
  • speechиспользуется для программ чтения с экрана

screenпо умолчанию.

Раньше у нас их было больше, но большинство из них устарело, поскольку оказалось, что они не являются эффективным способом определения потребностей в устройствах.

Мы можем использовать их в операторах @import следующим образом:

@import url(myfile.css) screen;
@import url(myfile-print.css) print;

Мы можем загрузить файл CSS на несколько типов носителей, разделив каждый запятой:

@import url(myfile.css) screen, print;

То же самое работает дляlinkтег в HTML:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen" />
<link rel="stylesheet" type="text/css" href="another.css" media="screen, print" />

Мы не ограничены только использованием типов мультимедиа вmediaатрибут и в@importдекларация. Есть еще кое-что

Дескрипторы медиа-функций

Во-первых, давайте представимдескрипторы медиа-функций. Это дополнительные ключевые слова, которые мы можем добавить кmediaатрибутlinkили в@importобъявление, чтобы выразить больше условий при загрузке CSS.

Вот их список:

  • width
  • height
  • device-width
  • device-height
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • orientation
  • scan
  • grid

Каждому из них соответствуют min- * и max- *, например:

  • min-width,max-width
  • min-device-width,max-device-width

и так далее.

Некоторые из них принимают значение длины, которое может быть выражено вpxили жеremили любое значение длины. Это случайwidth,height,device-width,device-height.

Например:

@import url(myfile.css) screen and (max-width: 800px);

Обратите внимание, что мы оборачиваем каждый блок, используя дескрипторы медиа-функций в скобках.

Некоторые принимают фиксированное значение.orientation, используется для определения ориентации устройства, принимаетportraitили жеlandscape.

Пример:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />

scan, используется для определения типа экрана, принимаетprogressive(для современных дисплеев) илиinterlace(для старых ЭЛТ-устройств)

Некоторым другим нужно целое число.

Нравитьсяcolorкоторый проверяет количество битов на компонент цвета, используемый устройством. Очень низкоуровневый, но вам просто нужно знать, что он существует для вашего использования (например,grid,color-index,monochrome).

aspect-ratioиdevice-aspect-ratioпринять значение отношения, представляющее отношение ширины к высоте области просмотра, которое выражается в виде дроби.

Пример:

@import url(myfile.css) screen and (aspect-ratio: 4/3);

resolutionпредставляет собой плотность пикселей устройства, выраженную втип данных разрешенияподобноdpi.

Пример:

@import url(myfile.css) screen and (min-resolution: 100dpi);

Логические операторы

Мы можем комбинировать правила, используяand:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />

Мы можем выполнить логическую операцию типа «или», используя запятые, которые объединяют несколько медиа-запросов:

@import url(myfile.css) screen, print;

Мы можем использоватьnotчтобы отрицать медиа-запрос:

@import url(myfile.css) not screen;

Важный:notможет использоваться только для отрицания всего медиа-запроса, поэтому он должен быть помещен в его начало (или после запятой)

Медиа-запросы

Все эти правила, которые мы видели, применимы к @import или кlinkHTML-тег также может применяться внутри CSS.

Вам нужно завернуть их в@media () {}структура.

Пример:

@media screen and (max-width: 800px) {
  /* enter some CSS */
}

и это основа дляотзывчивый дизайн.

Медиа-запросы могут быть довольно сложными. В этом примере CSS применяется только в том случае, если это экранное устройство, ширина от 600 до 800 пикселей и альбомная ориентация:

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
}

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css: