媒体查询的应用以及在css3中的变革

标签：

　　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(指输出设备为栅格型或位图型)。

媒体查询的应用以及在css3中的变革

标签：

原文地址：http://www.cnblogs.com/s-z-y/p/4470941.html