CSS3 响应式布局 – 媒体查询 媒体查询学习总结

CSS3 媒体查询，CSS3 媒体查询。使用@media查询，可以为不同的媒体类型定义不同的样式；还可以针对不同的屏幕尺寸设置不同的样式；当浏览器调整大小时，页面也会根据浏览器的宽度和高度调整大小。渲染页面。
用法如下

@media 媒体类型 and|not|only (媒体特性) {
    ......
    }

媒体类型
值说明
all：适用于所有设备
打印到打印机和打印视图
屏幕到计算机屏幕、平板电脑、智能手机等 语音用于屏幕阅读器等声音生成设备

媒体属性：
宽高比：定义输出设备中页面可见区域的宽度和高度之间的比例
颜色：定义每个输出设备中的颜色组 原稿的数量。如果不是颜色单元，则该值等于 0
颜色索引：定义输出单元的颜色查找表中的条目数。如果未使用颜色查找表，则该值等于 0
device-aspect-ratio：定义输出设备屏幕的可见宽度与高度的比率。
设备高度：定义输出设备在屏幕上的可见高度。
device-width：定义输出设备屏幕的可见宽度。
grid：用于询问输出设备是使用grid还是lattice。
高度：定义输出单元中页面可见区域的高度。
max-aspect-ratio：定义输出设备屏幕的可见宽度和高度之间的最大比率。
max-color：定义每组输出设备中彩色原稿的最大数量。
max-color-index：定义输出设备颜色查找表中的最大条目数。
max-device-aspect-ratio：定义输出设备屏幕的可见宽度和高度之间的最大比率。
max-device-height：定义输出设备屏幕上可见的最大高度。
max-device-width：定义输出设备屏幕的最大可见宽度。
max-height：定义输出单元中页面上的最大可见区域高度。
最大单色：定义每个单色原稿的最大数量。单色帧缓冲区​​中包含的像素。
最大分辨率：定义设备的最大分辨率。
max-width：定义输出单元中页面的最大可见区域宽度。
min-aspect-ratio：定义输出设备中页面可见区域的宽度和高度之间的最小比例。
min-color：定义每组输出单元中彩色原稿的最小数量。
最小颜色索引：定义输出设备颜色查找表中的最小条目数。
min-device-aspect-ratio：定义输出设备屏幕的可见宽度和高度之间的最小比率。
min-device-width：定义输出设备屏幕的最小可见宽度。
min-device-height：定义输出设备屏幕的最小可见高度。
最小高度：定义输出单元中页面上的最小可见区域高度。
最小单色：定义每个单色原稿的最小数量。单色帧缓冲区​​中的像素
最小分辨率：定义设备的最小分辨率。
min-width：定义输出单元中页面上最小可见区域的宽度。
单色：定义每张单色原稿的数量。单色帧缓冲区​​中包含的像素。如果不是单色设备，该值等于0
orientation：定义输出设备中页面可见区域的高度是否大于等于宽度。
分辨率：定义设备的分辨率。例如：96dpi、300dpi、118dpcm
扫描：定义电视设备的扫描过程。
宽度：定义输出单元中页面可见区域的宽度。

引用媒体查询有两种方式，
第一种：

<link rel="stylesheet" media=" 媒体类型 and|not|only (媒体特性)" href="">

使用逗号分隔媒体查询，表示并列，如

    <link rel="stylesheet" media="handheld and (max-width:20em), screen and(max-width:30em), projection" href="">

第二种：这也可以在css中完成你还可以使用css的@import指令，有条件地将其他样式表引入到当前样式表中，比如

@import url('') screen and (max-width: 360px)

需要注意的是，使用css的@import方法会增加http请求，从而影响加载速度

虽然现在的浏览器可以智能地忽略与自身不匹配的样式文件，但它并不一定会下载那些文件。因此，将不同媒体查询的样式存储在单独的文件中并没有多大好处。使用多个单独的文件会增加页面渲染的成本。 HTTP 请求数，导致页面加载速度变慢。

浏览器支持问题：ie8及以下浏览器不支持css媒体查询