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

偏执的太偏执、 2023-08-17 17:20 71阅读 0赞

CSS一直都支持设置与媒体相关联的样式表。它们可以适应不同媒体类型的显示。例如，文档在屏幕显示时使用sans-serif字体，在打印时则使用serif字体。screen和print是两种预定义的媒体类型。

在html4中，媒体样式表的写法是

在css3中，媒体查询扩展了媒体类型的功能，至此更为精准的样式表标签，媒体查询由媒体类型和若干表达式组成，表达式负责检查特定媒体特性的条件。通过媒体查询，我们不需要修改网页内容，就可以使文档显示适应特定的输出设备。媒体查询是一个逻辑表达式，结果为true or false.如果媒体查询的媒体类型与用户客户端所在设备媒体类型相匹配，并且媒体查询的所有表达式都为真，那么它就返回真。

下面是一些媒体查询的例子：

<--!应用于支持指定特性（彩色）的特殊媒体类型（‘screen’）-->
    <link rel="stylesheet" media="screen and (color)" href="example.css">
    
    @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；