媒体查询的应用以及在css3中的变革
浏览数：19 /
时间：2015年06月09日
CSS一直都支持设置与媒体相关联的样式表。它们可以适应不同媒体类型的显示。例如，文档在屏幕显示时使用sans-serif字体，在打印时则使用serif字体。screen和print是两种预定义的媒体类型。
在html4中，媒体样式表的写法是
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css">
在css3中，媒体查询扩展了媒体类型的功能，至此更为精准的样式表标签，媒体查询由媒体类型和若干表达式组成，表达式负责检查特定媒体特性的条件。通过媒体查询，我们不需要修改网页内容，就可以使文档显示适应特定的输出设备。媒体查询是一个逻辑表达式，结果为true or false.如果媒体查询的媒体类型与用户客户端所在设备媒体类型相匹配，并且媒体查询的所有表达式都为真，那么它就返回真。
下面是一些媒体查询的例子：
<--!应用于支持指定特性（彩色）的特殊媒体类型（‘screen’）--> <link rel="stylesheet" media="screen and (color)" href="example.css"> <!--写在CSSd @import-rule语句中--> @import url(color.css) screen and (color);
有一种适用所有媒体类型的简写语法，其中关键字all和后面的and可以省掉。
@media (orientation:portrain){...}
@media all and (orientation:portrain){...}
设计师和开发者可以使用这种方法创建出满足特殊需求的复杂查询：
@media all and (max-width:698px) and (min-width:520px),(min-width:1150px){
body{
background:#ccc;
}
}
媒体查询的特性有很多，如下：
width和device-width;
height和device-height;
orientation;
aspect-ratio和device-aspect-ratio;
color和color-index;
monochrome(如果不是monochrome设备，则等于0)；
resolution；
scan;
grid(指输出设备为栅格型或位图型)。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
