<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>3.7 媒体查询--基础</title>
<style>
/* screen 所有设备 / print 打印预览 / speech 屏幕阅读器 */
/*1. 什么是媒体查询 media query*/
/*@media screen and (min-width: 900px) {
body {
background-color: red;
}
}*/
/*
2. 为什么需要媒体查询
一套样式不可能适应各种大小的屏幕
针对不同的屏幕大小写样式
让我们的页面在不同大小的屏幕上都能正常显示
*/
/*
3. 媒体类型
all(default)
screen / print / speech
*/
/*@media (min-width: 900px) {
body {
background-color: red;
}
}*/
/*@media print and (min-width: 900px) {
body {
background-color: red;
}
}*/
/*
4. 媒体查询中的逻辑
与( and )
或( , )
非( not )
*/
/*@media screen and (min-width: 900px) and (max-width: 1024px) {
body {
background-color: red;
}
}*/
/*@media screen and (min-width: 1024px), (max-width: 900px) {
body {
background-color: red;
}
}
@media screen and (min-width: 1024px), screen and (max-width: 900px) {
body {
background-color: red;
}
}*/
/*@media not screen and (min-width: 900px) and (max-width: 1024px) {
body {
background-color: red;
}
}*/
/*@media not screen and (min-width: 1024px), screen and (max-width: 900px) {
body {
background-color: red;
}
}*/
/*
5. 媒体特征表达式
width/max-width/min-width
-webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
orientation
landscape/portrait
height
device-width/device-height
screen.width/screen.height
aspect-ratio 视口的宽高比
*/
/*@media screen and (min-width: 900px) {
body {
background-color: red;
}
}*/
@media (-webkit-max-device-pixel-ratio: 2) and (orientation: landscape) {
body {
background-color: red;
}
}
</style>
</head>
<body>
</body>
</html>