Запросы ширины, высоты и ориентации

Характеристика width выбирает ширину области просмотра. Используйте min-width и max-width, чтобы определить диапазоны.

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

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

Характеристика orientation определяет, является ли область просмотра более высокой (portrait) или более широкой (landscape) по сравнению с другим измерением.

Выбирайте экраны с высокой плотностью пикселей (Retina) с помощью характеристики resolution или нестандартной, но широко поддерживаемой характеристики -webkit-device-pixel-ratio.

Выбирайте определённые соотношения сторон области просмотра. Это полезно, чтобы по-разному центрировать содержимое в областях просмотра 4:3 и 16:9.

Характеристика hover: hover определяет, является ли основным способом ввода точный указатель, поддерживающий наведение. Это полезно для стилей, предназначенных специально для сенсорных устройств.

pointer: fine — это точный курсор мыши, а pointer: coarse — палец или стилус. Это полезно для настройки размеров областей нажатия.

Создавайте правила специально для телефонов в альбомной ориентации, объединяя min-width и max-height:

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

Медиазапросы и единицы области просмотра (vw, vh) реагируют на одни и те же размеры области просмотра. Используйте медиазапросы для изменения макета, а единицы области просмотра — для гибкого задания размеров внутри макета.

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

К медиахарактеристикам относятся width, height, orientation, resolution, hover и pointer. Используйте их, чтобы адаптировать макеты к размерам области просмотра и возможностям устройств. Характеристики hover и pointer помогают различать сенсорные устройства и устройства с мышью, учитывая не только размер экрана.