媒体查询：基础知识

1、什么是媒体查询

例：当监测到屏幕宽度大于等于900px时，设置body背景颜色为红色。

@media screen and (min-width:900px){
	body{
		background: red;
	}
}

@media:媒体查询关键字
screen：屏幕类型
and：逻辑与
(min-width: 900px)：特征表达式
body{background: red;}：执行语句

2、为什么需要媒体查询

一套单一样式无法适应各种大小的屏幕，媒体查询针对不同的屏幕大小写样式，可以使页面在不同大小的屏幕上都能正常显示。

3、媒体类型

四个属性：all（default）、screen、print、speech。
all（default）：所有设备
screen：屏幕
print：打印预览
speech：屏幕阅读器

使用默认值all时可以简略：

@media (min-width:900px){
	body{
		background: red;
	}
}

4、媒体查询中的逻辑

与（and）
或（,）
非（not）
例：当监测到屏幕宽度大于等于1024px或小于等于900px时，设置body背景颜色为红色。

@media screen and (min-width:1024px),(max-width:900px){
	body{
		background: red;
	}
}

注：not后面全为and——管全部；not后面有“，”——管到“，”之前。

5、媒体特征表达式

属性1、宽

width / max-width / min-width

属性2、设备像素比

-webkit-device-pixel-ratio / -webkit-max-device-pixel-ratio / -webkit-min-device-pixel-ratio

属性3、横屏和竖屏

orientation: landscape | portrait;

属性4、视口宽高比(不常用)

aspect-ratio