Скриншот AtoZ CSS: медиа-запросы

Есть несколько вещей, которые мы можем запросить об устройстве:

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

Многие из них имеют также min и max разнообразие.

Я часто использую min-width и max-width , время от времени orientation , aspect-ratio и resolution а также min-height и max height . Я никогда не использовал другие, насколько я помню.

Ширина — наиболее распространенная вещь для запроса об устройстве, но так как сообщаемая ширина и ширина устройства часто различаются, необходимо добавить следующий meta в ваш HTML, что сделает их эквивалентными:

 <meta name="viewport" content="width=device-width, initial-scale=1"> 

initial-scale настроена так, чтобы устройства не масштабировались, чтобы вместить весь сайт в окне просмотра. Можно установить maximum-scale=1 но тогда это лишает пользователя возможности увеличивать страницу, что не очень удобно для пользователя.

Комбинированные запросы

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

 @media screen and (min-width: 600px) and (max-width: 800px) { } @media screen and (orientation: portrait) and (min-width: 800px) { } 

Также возможно использовать отрицание:

 @media not screen { } 

И ограничить применимость, используя only :

 @media only screen { } 

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

Адаптивный дизайн

Поскольку запросы @media допускают условное моделирование, когда определенные характеристики устройства являются истинными, мы можем использовать их для управления стилизацией страницы в диапазоне различных устройств или размеров устройств.

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

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

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

Когда экран становится шире, макет выглядит немного растянутым, а небольшое количество текста начинает выглядеть странно по сравнению с размером изображения. Приблизительно в 500 пикселей мы можем добавить запрос @media чтобы создать макет из двух столбцов вместо макета из 1 столбца.

 @media screen and (min-width: 500px) { .box { float: left; width: 50%; } } 

Поскольку экран снова становится шире, мы можем разместить 4 столбца, поэтому вместо этого можно изменить width каждого блока на 25%.

 @media screen and (min-width:500px) { .box { width: 25%; } } 

Из-за того, как CSS стили каскадируются, нам не нужно указывать float:left снова.

Такой подход, начиная с небольшого экрана и добавления стилей для создания более сложного макета, известен как «Mobile First», как это было написано в одноименной книге Люка Вроблевского .

Можно пойти наоборот — сначала рабочий стол — и начать с более сложной компоновки. В этом случае мы начинаем с плавающих блоков и шириной 25% и используем запросы max-width чтобы переопределить стили для небольших экранов. Это приводит к небольшому увеличению CSS, но иногда может быть легче разобраться. Тем не менее, если это возможно, я думаю, что лучше начать с мобильных устройств в первую очередь, так как в нем основное внимание уделяется проектированию и разработке с самого начала и снижается риск необходимости использовать сложный макет на крошечном экране.

Мне потребовалось некоторое время, чтобы сначала привыкнуть к мобильному телефону, но это определенно мой подход в эти дни — хотя я хотел бы знать, что вы думаете …

Следите за нашей статьей Quick Tip в ближайшее время!