CSS媒体查询，响应式布局必备

CSS媒体查询，响应式布局必备知识点

什么是媒体查询？&& 媒体查询的作用

媒体查询是一个可以根据屏幕的不同尺寸使用不同的CSS样式渲染页面的操作规范，仅在浏览器或者其他设备满足我们指定的鬼规则相匹配时CSS才会被应用。

媒体查询在实现响应式布局的时候起着关键性的作用，例如当’视口宽度小于750像素’时执行特定布局。

除此以外媒体查询也能用来探测和我们使用的设备相关联的其他条件，例如’设备是通过触屏操作还是鼠标操作’。

总结一句话媒体查询可以根据不同屏幕尺寸设置不同的样式，同时也能探测与设备相关联的一些条件。

CSS语法

@media mediatype and|not|only (media feature){
	/* CSS rules go here */
}

另外，也可以使用stylesheets：

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

媒体类型mediatype

mediatype	描述
all	适用于所有设备
print	适用于打印和打印预览
screen	适用于电脑、平板、手机等各种屏幕
speech	适用于屏幕阅读器等发声设备

常用媒体功能

名称	描述
height	定义输出设备中的页面可见区域高度。
width	定义输出设备中的页面可见区域宽度。
min-width	定义输出设备中的页面最小可见区域宽度。
max-height	定义输出设备中的页面最大可见区域高度。
max-width	定义输出设备中的页面最大可见区域宽度。
min-height	定义输出设备中的页面最小可见区域高度。
device-width	定义输出设备的屏幕可见宽度。
device-height	定义输出设备的屏幕可见高度。
min-device-width	定义输出设备的屏幕最小可见宽度。
max-device-width	定义输出设备的屏幕最大可见宽度。
min-device-height	定义输出设备的屏幕的最小可见高度。
max-device-height	定义输出设备的屏幕可见的最大高度。
aspect-ratio	定义输出设备中的页面可见区域宽度与高度的比率
color	定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
max-color	定义输出设备每一组彩色原件的最大个数。
device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的比率。
grid	用来查询输出设备是否使用栅格或点阵。
max-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-color-index	定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最大比率。
max-monochrome	定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution	定义设备的最大分辨率。
min-aspect-ratio	定义输出设备中的页面可见区域宽度与高度的最小比率。
min-device-aspect-ratio	定义输出设备的屏幕可见宽度与高度的最小比率。
min-resolution	定义设备的最小分辨率。
orientation	定义输出设备中的页面可见区域高度是否大于或等于宽度。
monochrome	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	定义电视类设备的扫描工序。

简单实例

宽：屏幕宽度为600px时，body文本设置成红色

@media screen and (width: 600px){
	body{
		color:red;
	}
}

最大宽度：屏幕宽度小于400px时，body文本为红色

@media screen and (max-width: 400px){
	body{
		color:red;
	}
}

屏幕朝向：设备横屏时，body文本为红色

@media (orientation: landscape){
	body{
		color:red;
	}
}

复杂实例

逻辑与 ：屏幕宽度大于400px并且横屏时，body文本为红色

@media screen and (min-width: 400px) and (orientation: landscape){
	body{
		color:red
	}
}

逻辑或：屏幕宽度大于400px或者横屏时，body文本为红色

@media screen and (min-width: 400px) and (orientation: landscape){
	body{
		color:red
	}
}

逻辑非：屏幕不为横屏时，body文本颜色为红色

@media not all and (orientation: landscape){
	body{
		color:red
	}
}

end~~~本文存在不当之处欢迎指出噢

有疑问的同学，欢迎在下方留言

若未能及时回答，也可以选择加入前端开发交流群提问噢~~

群号：216644014(前端开发交流群)