Медиа-запросы некоторое время позволяли создавать адаптивные дизайны, подходящие для устройств. Эти более сложные запросы выводят вещи на новый уровень.
Полезный и доступный опыт жизненно важен для успешного веб-сайта. Если у ваших читателей положительный опыт, они с большей вероятностью примут призыв к действию, включая покупку продуктов. Они также с большей вероятностью вернутся или порекомендуют ваш сайт другим. Опыт является ключевым.
Медиа-запросы предлагают различные функции CSS, которые могут настроить ваш веб-сайт. Они позволяют адаптировать работу каждого пользователя в зависимости от возможностей его устройства. Узнайте, как предоставить вашим читателям наилучшие впечатления, независимо от того, используют ли они свой телефон или большой настольный монитор.
1. Функция указателя
Правило @media имеет функцию указателя, которая позволяет настраивать дизайн на основе основного указывающего устройства. Вы можете проверить наличие и качество.
Эта функция мультимедийного запроса указателя принимает одно из трех значений: нет, грубо или точно. Значение none применяется при отсутствии указывающего устройства. Грубое значение применяется, когда основное указывающее устройство имеет пониженный уровень точности. И точное значение применяется, когда первичное указывающее устройство имеет высокий уровень точности.
Использование указателя
<!DOCTYPE html>
<html lang=»en»>
<head>
<meta http-equiv=»X-UA-Compatible» content=»IE=edge»>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<style>input[type=»radio»] {
appearance: none;
border: solid;
border-color: black;
margin: 0;
}input[type=»radio»]:checked {
background: red;
}@media (pointer: fine) {
input[type=»radio»] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}@media (pointer: coarse) {
input[type=»radio»] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
</style>
<title>Pointer</title>
</head>
<body><label for=»options»>Options to Choose From: </label>
<input type=»radio» id=»options» > Option One
<input type=»radio» id=»options» > Option Two</body>
</html>
Приведенный выше код создает два параметра ввода радио, которые будут различаться в зависимости от точности основного устройства указания компьютера.
Компьютер с точным (или высококачественным) первичным указывающим устройством отобразит следующую веб-страницу:
Компьютер с основным устройством с ограниченной точностью (или низким качеством) отобразит следующую веб-страницу:
Устройство, имеющее первичное указывающее устройство с ограниченным уровнем точности, имеет переключатели большего размера. Это дает лучший пользовательский опыт для таких пользователей. С помощью указателя вы можете гарантировать, что все ваши пользователи получат удовольствие, независимо от их устройства.
2. Функция любого указателя
Как и функция указателя, функция медиа-запроса с любым указателем нацелена на указывающие устройства. Однако функция любого указателя оценивает каждое указывающее устройство компьютера. Функция любого указателя также использует значения none, грубые и точные.
Использование функции любого указателя
@media (any-pointer: fine) {
input[type=»radio»] {
width: 15px;
height: 15px;
border-radius: 20px;
border-width: 1px;
}
}@media (any-pointer: coarse) {
input[type=»radio»] {
width: 25px;
height: 25px;
border-radius: 20px;
border-width: 2px;
}
}
Вы можете просто заменить приведенный выше код разделом медиа-запроса кода в примере функции указателя. Приведенный выше код отображает соответствующий дисплей в зависимости от качества любого указывающего устройства, которое может иметь компьютер.
3. Функция наведения
Функция медиа-запроса при наведении оценивает, способен ли основной механизм ввода устройства наводить курсор на элементы в пользовательском интерфейсе.
Использование функции наведения
/* CSS */
a{
text-decoration: none;
color: black;
}
@media (hover: hover) {
a:hover {
color: blue;
}
}
<!— HTML —>
<a href=»#»> A link element</a>
Приведенный выше код отобразит элемент . Он будет менять цвет (с черного на синий) всякий раз, когда основной механизм ввода устройства (поддерживающий зависание) находится над ним.
4. Функция любого наведения
Медиа — запрос с любым наведением нацелен на любой механизм ввода, включая основной механизм ввода.
Использование функции любого наведения
@media (any-hover: hover) {
a:hover {
color: blue;
}
}
Приведенный выше медиа-запрос создает эффект наведения для любого механизма ввода, способного наводить курсор на элемент.
5. Функция разрешения
Функция медиа-запроса разрешения вычисляет количество пикселей, отображаемых конкретным устройством. Устройство, которое отображает больше пикселей на дюйм, имеет лучшее разрешение, потому что оно отображает изображения с большей детализацией. Эта функция может помочь разработчику решить, какие пользователи устройств могут более четко видеть элементы пользовательского интерфейса.
Функция разрешения использует диапазон. Это означает, что помимо использования ключевого слова разрешения вы можете использовать минимальное разрешение и максимальное разрешение. Функция разрешения медиазапросов относится к типу данных разрешения. Это означает, что характеристика разрешения измеряется в одной из трех единиц: точек на дюйм (dpi), точек на сантиметр (dpcm) или точек на пиксель (dppx).
Использование функции разрешения
/* CSS */
@media (min-resolution: 72dpi) {
p {
color: white;
background-color: blue;
}
}
<!— HTML —>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</p>
Наименьшее разрешение, которое может иметь устройство и при этом отображать качественные изображения, составляет 72 dpi. Итак, если устройство имеет разрешение 72 dpi или более, оно отобразит в своем браузере следующий вывод:
6. Функция ориентации
Окно просмотра устройства может иметь только одну из двух ориентаций: книжную или альбомную. Обратите внимание, что ориентация области просмотра отличается от ориентации устройства. Если устройство использует программную клавиатуру, его область просмотра может измениться с книжной на альбомную, в то время как само устройство все еще находится в портретной ориентации.
Использование функции ориентации
/* CSS */
body{
display: flex;
}
section{
border: 2px solid blue;
padding: 3px;
margin: 3px;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}@media (orientation: portrait) {
body {
flex-direction: column;
}
}<!— HTML —>
<section id=»section-1″> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id=»section-1″> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
<section id=»section-1″> Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
Приведенный выше код изменяет макет веб-страницы в зависимости от ориентации устройства.
Устройство с окном просмотра в ландшафтном режиме отобразит следующую веб-страницу:
Устройство с окном просмотра в портретном режиме отобразит следующую веб-страницу:
7. Высота
Функция медиа-запроса высоты позволяет указать стиль CSS на основе высоты области просмотра пользовательского устройства. Эта функция поддерживает диапазон, поэтому вы также можете использовать ключевые слова min-height и max-height.
Использование функции высоты
/* CSS */
@media (min-height: 360px) {
p{
border: 2px dotted orangered;
}}
<!— HTML —>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
Приведенный выше код настраивает то, что видит пользователь, в зависимости от высоты его устройства. Пользователи с высотой устройства 360 пикселей и выше увидят что-то похожее на следующую веб-страницу:
Устройства с высотой ниже 360 пикселей не будут отображать границу вокруг абзаца на веб-странице.
8. Ширина
Функция медиа-запроса ширины позволяет создавать определенные стили CSS на основе ширины области просмотра устройства пользователя. Эта функция также поддерживает диапазон, поэтому у вас есть возможность использовать ключевые слова min-width и max-width.
Использование функции ширины
/* CSS */
@media (min-width: 600px) {
p{
border: 2px solid purple;
}}
<!— HTML —>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
Приведенный выше код настраивает то, что видит пользователь, в зависимости от ширины его устройства. Пользователи с шириной устройства 600 пикселей и более увидят примерно следующую веб-страницу:
Использование медиа-запросов на основе ширины и высоты может быть эффективной стратегией, позволяющей сделать ваш веб-сайт адаптивным.
9. Цветовая характеристика
Функция цветного мультимедийного запроса оценивает цветовой компонент устройства (красный, зеленый, синий). Значение относится к тому, сколько битов дисплей использует для каждого компонента, что определяет, сколько разных цветов он может отображать. Современные устройства обычно используют 24-битный дисплей, который использует восемь битов на компонент цвета. Он также принимает целочисленное значение, где бесцветное устройство равно нулю.
Функция цвета также использует диапазоны min-color и max-color.
Использование функции цвета
/* CSS */
@media (min-color: 7) {
p{
border: 2px solid green;
}}
<!— HTML —>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
Устройства с цветовым компонентом семь и выше будут отображать в своих браузерах следующий вывод:
Теперь вы можете создавать уникальный пользовательский опыт
Вы должны иметь возможность использовать эти расширенные медиа-запросы, чтобы улучшить взаимодействие с каждым пользователем, который посещает ваш веб-сайт или приложение. Важно, чтобы пользователи мобильных устройств и пользователей настольных компьютеров одинаково хорошо чувствовали себя на вашем сайте.
Медиа-запросы — не единственные инструменты CSS, которые могут укрепить ваши навыки разработчика.
