媒体查询的用途
媒体查询Media Queries,可以根据不同的设备为其实现不同的样式。@media可以根据不同的屏幕尺寸设置不同的样式,页面布局分别适应移动端、pc端等,在调整浏览器的大小,页面会根据媒体的宽度和高度来重新布置样式。
媒体查询可以用于检测很多东西:自动检测viewpoint(视窗)的宽度和高度;设备的宽度和高度;旋转方向(智能手机横屏或竖屏);分辨率大小。
语法
直接写在css样式中
@media mediatype and/not/only (media feature) { CSS-Code }
如何理解@media的语法规则:
使用媒体查询必须是以 @media 开头;
然后指定设备类型(媒体类型mediatype);
接着是括号()里的规定媒体/设备特征(media feature),媒体特征的书写格式与css样式类似,都是属性名:属性值(例如min-width:200px);
如何使用媒体查询:
link标签引入:media属性(eg:引入(screen)彩色屏幕显示,并且最大宽度不超过800px时候的CSS样式)
<link rel="stylesheet" media="screen and (max-width:800px)" href="./demo.css">
媒体类型(Media Type): all(全部)、screen(屏幕)、print(页面打印或打印预览模式)
媒体特性(Media features): width(渲染区宽度)、device-width(设备宽度)... Media Query是CSS3 对Media Type的增强版,其实可以将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)