媒体查询
@media(min-width:300px){
body{
background-color: cornflowerblue
}
}
@media(min-width:700px){
body{
background-color: aquamarine
}
}
媒体查询支持逻辑操作符and,not,only
逗号分割符相当于or
not关键字应用于整个媒体查询
媒体特征
- 颜色
color指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。 - 颜色索引
color-index指定了输出设备中颜色查询表中的条目数量。 - 宽高比
aspect-ratio描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。 - 设备宽高比
device-aspect-ratio描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。 - 设备高度
device-height描述了输出设备的高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域 - 设备宽度
device-width描述了输出设备的宽度（整个屏幕或页的宽度，而不是仅仅像文档窗口一样的渲染区域） - 网格
grid判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0 - 高度
height媒体属性描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度。 - 黑白
monochrome指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0。 - 方向
orientation指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式。 值：landscape | portrait - 分辨率
resolution指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。 - 扫描
scan描述了电视输出设备的扫描过程。 - 宽度
width描述了输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度。
参考链接
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
