媒体查询

Media Query

1、在link标签上使用

<link rel="stylesheet" media="(max-width:800px)" href="example.css" />
注意：及时不满足查询条件，css文件也会下载

2、在css代码中使用

@media (max-width:600px){
    p{
        color: red;
    }
}

媒体特性

viewport是用户网页的可视区域，范围成中文叫做“视区”
aspect-ratio 可视窗口宽高比 min/max
device-aspect-ratio 设备的宽高比 min/max
device-width 设备的宽度 min/max

媒体类型 Media Type

1、all 用于所有的媒体设备
2、screen 用于电脑显示器
3、print 用于打印机

设备方向 orientation

orientation-landscape 水平方向
orientation-portrait 垂直方向

Media Query 语法

and 并且
, 或者
not 否定
only only+媒体类型
not , and和only可以用来构建复杂的媒体查询
and操作符用来把多个媒体查询组合起来，只有当每个属性都为真时，这条查询的结果才执行
not操作符用来对一条媒体查询的结果进行取反，即not选中的这一条不生效，其他的都生肖
only用于使媒体查询在老浏览器中失效
，也可以将多个媒体查询以逗号分隔放在一起，只要其中任何一个为真，整个查询语句就返回真