9 хитростей CSS для продвинутых медиазапросов, которые вы должны знать

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

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

1. Функция указателя

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

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

отлично значение применяется, когда основное указывающее устройство имеет высокий уровень точности.

Использование указателя

Варианты на выбор: 
 Вариант первый
 Вариант второй

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

Компьютер с точным (или высококачественным) первичным указывающим устройством отобразит следующую веб-страницу:

Компьютер с основным устройством с ограниченной точностью (или низким качеством) отобразит следующую веб-страницу:

Устройство, имеющее первичное указывающее устройство с ограниченным уровнем точности, имеет переключатели большего размера. Это дает лучший пользовательский опыт для таких пользователей. С помощью указателя вы можете гарантировать, что все ваши пользователи получат удовольствие, независимо от их устройства.

2. Функция любого указателя

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

Использование функции любого указателя

 @media (любой указатель: хорошо) {
 ввод[тип="радио"] {
 ширина: 15 пикселей;
 высота: 15 пикселей;
 радиус границы: 20px;
 ширина границы: 1px;
 }
 }
@media (любой указатель: грубый) {
 ввод[тип="радио"] {
 ширина: 25 пикселей;
 высота: 25 пикселей;
 радиус границы: 20px;
 ширина границы: 2px;
 }
 }

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

3. Функция наведения

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

Использование функции наведения

 /* CSS */
 а {
 текстовое оформление: нет;
 черный цвет;
 }
 @media (наведение: наведение) {
 а: наведите {
 цвет синий;
 }
 }
 HTML 
 Элемент ссылки

Приведенный выше код отобразит элемент. Он будет менять цвет (с черного на синий) всякий раз, когда основной механизм ввода устройства (поддерживающий зависание) находится над ним.

4. Функция любого наведения

То любое наведение медиа-запрос нацелен на любой механизм ввода, включая основной механизм ввода.

Использование функции любого наведения

@media (любое наведение: наведение) {
 а: наведите {
 цвет синий;
 }
 }

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

5. Разрешение

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

Функция разрешения использует диапазон. Это означает, что наряду с использованием разрешающая способность ключевое слово, вы можете использовать мин-разрешение а также максимальное разрешение. Функция разрешения медиазапросов относится к типу данных разрешения. Это означает, что характеристика разрешения измеряется в одной из трех единиц: точек на дюйм (dpi), точек на сантиметр (dpcm) или точек на пиксель (dppx).

Использование функции разрешения

/* CSS */
@media (минимальное разрешение: 72 dpi) {
 п {
 белый цвет;
 цвет фона: синий;
 }
}
 HTML 

 Lorem ipsum dolor sit, amet consectetur adipisicing elit.

Наименьшее разрешение, которое может иметь устройство и при этом отображать качественные изображения, составляет 72 dpi. Таким образом, если устройство имеет разрешение 72 dpi или более, оно отобразит в своем браузере следующий вывод:

6. Ориентация

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

Использование функции ориентации

/* CSS */
 тело{
 дисплей: гибкий;
 }
 раздел{
 граница: 2 пикселя сплошного синего цвета;
 отступ: 3px;
 поле: 3px;
 }
 @media (ориентация: альбомная) {
 тело {
 flex-направление: строка;
 }
 }
@media (ориентация: портрет) {
 тело {
 flex-направление: столбец;
 }
 }
 HTML 
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

 Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Приведенный выше код изменяет макет веб-страницы в зависимости от ориентации устройства.

Устройство с окном просмотра в ландшафтном режиме отобразит следующую веб-страницу:

Устройство с окном просмотра в портретном режиме отобразит следующую веб-страницу:

7. Высота

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

Использование функции высоты

 /* CSS */
 @media (минимальная высота: 360 пикселей) {
 п{
 граница: 2px пунктирная оранжево-красная;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

Устройства с высотой ниже 360 пикселей не будут отображать границу вокруг абзаца на веб-странице.

8. Ширина

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

Использование функции ширины

 /* CSS */
 @media (минимальная ширина: 600 пикселей) {
 п{
 граница: 2 пикселя сплошного фиолетового цвета;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Приведенный выше код настраивает то, что видит пользователь, в зависимости от ширины его устройства. Пользователи с шириной устройства 600 пикселей и более увидят примерно следующую веб-страницу:

Использование медиа-запросов на основе ширины и высоты может быть эффективной стратегией в сделать ваш сайт адаптивным.

9. Цвет

Функция цветного мультимедийного запроса оценивает цветовой компонент устройства (красный, зеленый, синий). Значение относится к тому, сколько битов дисплей использует для каждого компонента, что определяет, сколько разных цветов он может отображать. Современные устройства обычно используют 24-битный дисплей, который использует восемь битов на компонент цвета. Он также принимает целочисленное значение, где бесцветное устройство равно нулю.

Функция цвета также использует мин-цвет а также макс-цвет диапазоны.

Использование функции цвета

 /* CSS */
 @media (минимальный цвет: 7) {
 п{
 граница: 2 пикселя сплошного зеленого цвета;
 }
}
 HTML 

 Lorem ipsum dolor sit amet consectetur adipisicing elit.

Устройства с цветовым компонентом семь и выше будут отображать в своих браузерах следующий вывод:

Теперь вы можете создавать уникальный пользовательский опыт

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

Медиа-запросы — не единственные инструменты CSS, которые могут укрепить ваши навыки разработчика.

8 основных советов и приемов CSS, которые должен знать каждый разработчик

Читать далее

Об авторе