media query(媒体查询)和media type(媒体类型)

media query

正如前文所说，media query是CSS 3对media type的增强，事实上我们可以将media query看成是media type+css属性判断。

请注意，下面提到的一些关键字等内容，有些是在media type中就可用的，但是放到media query中将能更好的发挥其作用，所以我就在适当的地方引入。

css属性判断可以只是某个CSS属性的名称，也可以是属性+值：

<link rel="stylesheet" media="screen and (animation)” herf=“…”

如果设备支持CSS动画，那么就能执行这个外部样式表文件。

1
2
3

@media screen and (max-width:240px){
	body{font-size:medium;}
}

如果设备的浏览器的最大宽度是240px，则页面将使用中号字体。

PS:属性和值之间是用冒号连接的，而不是等号，这与正常的CSS的写法一致。

媒体查询语句结构

我们可以将上述语句称为媒体查询语句，这样也更能理解一些。从上面的例子也可以看出，媒体查询语句一般由media type+一到多个CSS属性判断组成，而多个CSS属性判断可以用关键字and连接：

1
2
3

@media screen and (min-width:1024px) and (max-width:1280px){
	body{font-size:medium;}
}

其中media type可以省略，属性值也可以为空：

@media (color:4){}

@media (color){}

当然，请注意，有属性值和没有属性值的情况代表的意义是不一样的，所以上面的这两条规则不是等价的。

而针对多个媒体类型的CSS规则，可以用逗号来隔开：

1
2
3

@media handheld and (min-width:360px),screen and (min-width:480px){
body{font-size:large;}
}

1
2
3

@media screen and (min-width:800px),print and (min-width:7in){
body{font-size:small;}
}

media query支持的属性

事实上，media query

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!