媒体查询详解

Posted 2020-09-12

媒体查询是响应式设计的核心。

css语法：

以@media开头来表示这是一条媒体查询语句。

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

或针对不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

详解：

mediatype媒体类型：

1.all:用于所有设备

2.print：用于打印机和打印预览

3.screen：用于电脑屏幕，平板电脑，智能手机等

4.speech：应用于屏幕阅读器等发声设备

其余已废弃

连接符

1.and 把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时，结果才为真。

2.or 或，（逗号） 如果任何一个媒体查询返回真，样式就是有效的。

3.not 应用于整个媒体查询，在媒体查询为假时返回真,在逗号媒体查询列表中 not 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 


4.only 

操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用,其实无论是否使用only操作符都对结果无影响

实际上，only、not、and和or(用逗号表示)这四种逻辑中，只有and比较常用

media feature 媒体属性

媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与html和XML冲突的“<”和“>”字符

媒体属性必须用括号()包起来，否则无效

1.width | min-width | max-width//定义输出设备中的页面可见区域宽度。

2.height | min-height | max-height//定义输出设备中的页面可见区域高度。

3.device-width | min-device-width | max-device-width//定义输出设备的屏幕可见宽度。

4.device-height | min-device-height | max-device-height//定义输出设备的屏幕可见高度。

注：设备宽度(device-width)指的是显示该页面的屏幕宽度，这里指的是屏幕宽度，通常可以使用于移动设备的，因为这样的设备具有更小的显示区域。宽度(width)指的是浏览器窗口的宽度，特定媒体类型的渲染视区，对于桌面的操作系统来说，其实就是当前浏览器的宽度（并且是包括滚动条的）。且宽度默认等于屏幕宽度（width=device-width）

5.aspect-ratio | min-aspect-ratio | max-aspect-ratio//定义输出设备中的页面可见区域宽度与高度的比率

6.device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio//定义输出设备的屏幕可见宽度与高度的比率。

7.color | min-color | max-color//定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0

8.color-index | min-color-index | max-color-index//定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0

9.monochrome | min-monochrome | max-monochrome  //定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0

10.resolution | min-resolution | max-resolution //定义设备的分辨率。如：96dpi, 300dpi, 118dpcm

11。scan | grid  //定义电视类设备的扫描工序|用来查询输出设备是否使用栅格或点阵。

例：

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .gridmain {
        width:100%;
    }

    .gridright {
        width:100%;
    }
}