С ростом популярности мобильных устройств пользователи больше не используют традиционные компьютеры для просмотра веб-контента. Все больше и больше пользователей начинают использовать смартфоны, планшеты или другие устройства различных размеров для просмотра веб-контента. пользователи разных устройств могут получить хороший опыт, им необходимо использовать медиа-запросы.
Медиа-запрос — одна из наиболее важных функций таблиц стилей CSS. Так называемый медиа-запрос относится к различению различных устройств (таких как компьютеры, мобильные телефоны, планшеты, устройства Брайля и т. д.) на основе разных типов мультимедиа (типов устройств). и условия и определите для них разные стили CSS соответственно. Медиа-запросы позволяют CSS более точно действовать на разных устройствах или в разных условиях на одном устройстве, чтобы все пользователи могли получить хороший пользовательский опыт.
1. Тип носителя
Типы мультимедиа используются для представления категорий устройств. CSS предоставляет несколько ключевых слов для представления различных типов мультимедиа, как показано в следующей таблице:
2. Характеристики СМИ
Помимо конкретных типов, конкретные характеристики устройства также можно описать с помощью некоторых атрибутов, таких как ширина, высота, разрешение и т. д., как показано в следующей таблице:
3. Логические операторы
Логические операторы включают not, and и only. Сложные медиа-запросы можно создавать с помощью логических операторов. Вы также можете разделить несколько медиа-запросов запятыми и объединить их в одно правило.
и: используется для объединения нескольких медиа-запросов в один медиа-запрос. Если каждое правило запроса истинно, медиа-запрос также может комбинировать медиа-характеристики и медиа-типы.
not: используется для отрицания медиа-запросов. Если правило запроса неверно, оно возвращает true, в противном случае — false. Если используется оператор not, необходимо также указать тип носителя;
only: вступит в силу, только если весь запрос соответствует. Если параметр only не используется, старые браузеры просто интерпретируют экран и (максимальная ширина: 500 пикселей) как экран, игнорируя остальную часть запроса и применяя стиль ко всем экранам. Если вы используете единственный оператор, необходимо также указать тип носителя.
4. Определите медиа-запросы
В настоящее время вы можете определять медиа-запросы двумя способами:
Используйте правила @media или @import, чтобы указать соответствующий тип устройства в таблице стилей;
Используйте атрибут media, чтобы указать конкретный тип устройства в <style>, <link>, <source> или другом HTML-элементе.
(1)@медиа
Мы кратко рассмотрели @media в разделе «CSS @Rules». Используя @media, вы можете указать набор медиа-запросов и блок стилей CSS только в том случае, если медиа-запрос соответствует используемому устройству, указанному стилю CSS. будет применен к документу. Пример кода выглядит следующим образом:
/*На экранах с разрешением менее 992 пикселей установите синий цвет фона*/@mediascreenand(max-width:992px){body{background-color:blue;}}/*На экранах с разрешением 600 пикселей или меньше На экрана, установите цвет фона на оливковый */@mediascreenand(max-width:600px){body{background-color:olive;}}(2) @импорт
@import используется для импорта указанного внешнего файла стиля и указания целевого типа носителя. Пример кода выглядит следующим образом:
@importurl(css/screen.css)screen;/*Представляем внешние стили, этот стиль будет применяться только к компьютерным мониторам*/@importurl(css/print.css)print;/*Представляем внешние стили, этот стиль будет только применено к устройству печати*/body{background:#f5f5f5;line-height:1.2;}Примечание. Все операторы @import должны располагаться в начале таблицы стилей, а стили, определенные в таблице стилей, переопределяют конфликтующие стили в импортированных внешних таблицах стилей.
(3) медиа-атрибут
Вы также можете определить медиа-запросы в медиа-атрибутах <style>, <link>, <source> и других тегах. Пример кода выглядит следующим образом:
/*Примените этот стиль, когда ширина страницы больше или равна 900 пикселей*/<linkrel=stylesheetmedia=screenand(min-width:900px)href=widescreen.css>/*Примените этот стиль, когда ширина страницы меньше или равно 600 пикселям*/< linkrel=stylesheetmedia=screenand(max-width:600px)href=smallscreen.css>
Совет: Вы также можете указать несколько типов мультимедиа в атрибуте media, разделяя каждый тип мультимедиа запятыми, например, media=screen, print.