После нескольких дней рыбалки руководитель прислал задание.Требование состоит в том, чтобы написать отзывчивый веб-сайт, который совместим с ПК, Pad и мобильными телефонами.Я не могу ни смеяться, ни плакать, когда слышу это, но это меня убивает .Мы все знаем, что писать отзывчивые страницы хлопотно. Очень беспомощно, так как лидер попросил, то напишите это. Перед официальным стартом я нашел соответствующие заметки, записанные ранее, и хотел сначала просмотреть их. Когда я увидел содержание медиа-запрос, я обнаружил, что у меня нет знаний. Поэтому я просто воспользовался выходными, чтобы кратко разобраться с соответствующими знаниями о медиа-запросах. Когда я захочу просмотреть его позже, я могу прочитать эту статью.
Сегодняшний главный герой не о том, как написать адаптивную страницу. Эта тема немного широка, и я напишу ее позже, когда у меня будет время. Сегодня поговорим об очень важном моменте адаптивной верстки:媒体查询.
Что такое медиа-запросы?
Запросы средств массовой информации:mediaсвойства, которые можно использовать для различных媒体类型или媒体功能
мультимедийная функция
Определите разные стили. Обычно при разработке адаптивных страницmediaсвойство очень полезно. Мы можем установить это свойство вstyleэтикетка. Ниже媒体功能Запрос, его роль заключается в запросе размера экрана и применении различных стилей.
<style media="(min-width: 1000px)">
div {
color: red;
}
</style>
<style media="(max-width: 1000px">
div {
color: green;
}
</style>
тип носителя
увидеть другой媒体类型Запрос
<style media="screen">
div {
color: red;
}
</style>
<style media="print">
div {
color: green;
}
</style>
Устройства экрана запроса, гдеscreenУказывает тип устройства Обычно наши компьютеры, планшеты, мобильные телефоны и т. д. относятся кscreenТип Другие включают, например,printУказывает на печатающее устройство и т. д. (используяCtrl+pВы можете вызвать его). Если вы не укажете значение, это значение по умолчанию. Значение по умолчаниюall.
логический оператор
Работает, когда ширина экрана составляет от 400 до 600 пикселей, что используетandЛогический оператор, указывающий, что оба условия должны быть выполнены
<style media="screen and (min-width:400px) and (max-width:600px)"></style>
Если это пейзаж или максимальная ширина 768 пикселей, используйте,Разделитель-запятая представляет или, что означает, что до тех пор, пока он альбомный (определяется как высота видимой области страницы на устройстве вывода меньше, чем ширина) или ширина меньше 768 пикселей
<style media="screen and (orientation:landscape), screen and (max-width:768px)"></style>
Не работает при ширине экрана от 400 до 600 пикселей. Обратите внимание:notКлючевые слова можно использовать только для отрицания всего медиа-запроса, а не отдельного выражения, поэтому при использовании они обычно помещаются в начало.
<style media="not screen and (min-width:400px) and (max-width:600px)"></style>
упомянутый вышеand, ,(или значение) иnotЭти три логических оператора, помимоonlyИ т. д. только означает, что он используется только в браузерах, поддерживающих медиа-запросы.Реальный сценарий заключается в том, что в браузерах, поддерживающих медиа-запросы, добавление или не добавление только то же самое, но в браузерах, которые не поддерживают медиа-запросы, потому что это делает не знаю только, этот медиа-запрос будет игнорироваться напрямую.Использование выглядит следующим образом
<style media="only screen and (min-width:400px) and (max-width:600px)"></style>
Где используются СМИ?
Тот же медиа-атрибут можно использовать и в теге ссылки, при этом независимо от того, совпадает ли медиа-запрос или нет, будет загружен css-файл.
<link rel="stylesheet" href="css/common.css">
<link media="(min-width:1000px)" rel="stylesheet" href="css/pc.css">
<link media="(max-width:750px)" rel="stylesheet" href="css/mobile.css">
<link media="screen" rel="stylesheet" href="css/screen.css">
<link media="print" rel="stylesheet" href="css/print.css">
Для таблиц стилей на основе html после передачиmediaКогда атрибут ограничивает носитель, его использование находится вlinkа такжеstyleэлемент тот же.
И в таблице стилей вы также можете@importПравила ограничивают СМИ
html-страница представляетindex.cssфайл, все остальные файлы css находятся в этомindex.cssВведен в файл, медиа-запрос при импорте внешнего файла
@import url(./common.css);
@import url(./pc.css) (min-width:1000px);
@import url(./mobile.css) (max-width:750px);
более того@mediaБлочный синтаксис, который мы используем чаще, позволяет нам определять разные стили для нескольких медиа в одной и той же таблице стилей.
.div1 {
background-color: orange;
}
@media only screen and (min-width: 1000px) and (max-width: 1200px){
.div1 {
background-color: red;
}
}
@media only screen and (min-width: 800px) and (max-width: 1000px){
.div1 {
background-color: green;
}
}
@media only screen and (max-width: 800px){
.div1 {
background-color: blue;
}
}
В приведенном выше коде, когда мы продолжаем масштабировать ширину браузера, мы можем видеть разные эффекты.
Реализовать адаптацию изображения
Иногда нам нужно отображать разные изображения, разные размеры или разный контент на разных устройствах или страницах разной ширины. Так как же это сделать? Вот идея:
<picture>
<source srcset="images/horizontal.jpg" media="(min-width: 800px)">
<source srcset="images/vertical.jpg" media="(min-width: 600px)">
< img src="images/default.jpg" alt="">
</picture>
Когда ширина устройства больше 800 пикселей, используйте горизонтальное изображение (horizontal.jpg), когда оно находится между 600 и 800 пикселей, используйте вертикальное изображение (вертикальное), когда оно меньше 600 пикселей, используйте изображение по умолчанию, указанное в src в тег img (по умолчанию).pictureЭлемент предоставляет разные изображения для разных сцен, включая 0 или более исходных элементов и элемент img. Здесь мы объединяем медиа-запросы для отображения разных изображений с разной шириной. Если нет подходящих сцен, используйте изображение по умолчанию.
Подробнее об использовании тега изображения:ткни меня
Медиа-запросы с JavaScript
Синтаксис следующий:
mqList = window.matchMedia(mediaQueryString) // 参数为一个被用于媒体查询解析的字符串 返回一个新的用来媒体查询的MediaQueryList对象
Такие как:
const obj = window.matchMedia('(max-width:600px)')
console.log(obj)
Результат выглядит следующим образом:
matchesсвойства для определения текущегоdocumentСоответствовать ли медиа-запросу. В настоящее время, поскольку ширина моей страницы превышает 600 пикселей, результат атрибута соответствует ложно
Кроме того, если мы хотим отслеживать изменение значения результата запроса, мы можем зарегистрировать прослушиватель для этого возвращаемого объекта, добавить функцию обратного вызова и инициировать обратный вызов при изменении состояния медиазапроса.
const obj = window.matchMedia('(max-width:600px)')
console.log(obj)
const callback = e => e.matches ? console.log('greater than 600px') : console.log('less than 600px')
obj.addListener(callback)
Когда ширина браузера составляет от 600px+ до 600px- или от 600px- до 600px+, вы можете увидеть соответствующее приглашение, напечатанное на консоли.Конечно, если вы не хотите продолжать мониторинг, вы можете использоватьremoveListenerудалять.
obj.removeListener(callback)
Суммировать: