CSS详解— —媒体查询(2)

最新推荐文章于 2023-06-29 15:52:07 发布

ljxqsq

最新推荐文章于 2023-06-29 15:52:07 发布

阅读量741

点赞数

分类专栏：移动Web网站

本文链接：https://blog.csdn.net/ljxqsq/article/details/8767790

版权

12 篇文章 0 订阅

订阅专栏

要将媒体查询添加到media属性中，您可以使用表1中的媒体功能设置一个或多个条件。与CSS属性一样，在一个冒号后指定媒体功能的值。每个条件包含在圆括号中，使用关键字and添加到媒体声明中。例如：

media="screen and (min-width: 401px) and (max-width: 600px)"

媒体查询是布尔值：它们要么为true，要么为false。如果整条语句为true，那么将应用样式表。如果为false，将忽略样式表。所以当使用上述查询时，所有部分必须为true，才会应用样式表。换句话说，它将仅适用于401到600像素宽的屏幕。

一些媒体功能（比如color、monochrome和grid）可用作条件，而无需指定一个值。例如，以下语句适用于所有彩色显示器：

media="screen and (color)"

没有or关键词可用于指定备用的媒体功能。相反，可以将备用功能以逗号分割列表的形式列出，比如：

media="screen and (min-width: 769px), print and (min-width: 6in)"

这会将样式应用到宽度超过769像素的屏幕或使用至少6英寸宽的纸张的打印设备。

要指定否定条件，可以在媒体声明中添加关键字not，比如：

media="not screen and (monochrome)"

不能在单个条件前使用not。该关键字必须位于声明的开头，而且它会否定整个声明。所以，上面的示例会应用于除单色屏幕外的所有设备。

媒体查询规范还提供了关键字only，它用于向早期浏览器隐藏媒体查询。类似于not，该关键字必须位于声明的开头。例如：

media="only screen and (min-width: 401px) and (max-width: 600px)"

无法识别媒体查询的浏览器要求获得逗号分割的媒体类型列表，规范要求，它们应该在第一个不是连字符的非数字字母字符之前截断每个值。所以，早期浏览器应该将上面的示例解释为：

media="only"

因为没有only这样的媒体类型，所以样式表被忽略。类似地，早期浏览器应该将以下语句解释为media="screen"：

media="screen and (min-width: 401px) and (max-width: 600px)"

换句话说，它应该将样式规则应用于所有屏幕设备，即使它不知道媒体查询的含义。不幸的是，IE 6–8未能正确实现该规范。没有将样式应用到所有屏幕的设备，它将整个样式表一起忽略。

尽管存在此行为，如果希望向其他不太常用的浏览器隐藏样式，仍然建议在媒体查询前面添加上only。

IE 6到IE 8中缺少对媒体查询的支持，这不是问题。只需创建一组用于所有未使用媒体查询的浏览器的基本样式，而使用媒体查询为使用更高级浏览器的访问者提供一种增强的体验。

也可以使用Internet Explorer条件注释来向早期版本的IE提供一组特殊的规则，比如：

<!--[if lt IE 9 & !IEMobile]> 
<link href="iestyles.css" rel="stylesheet" type="text/css"> 
<![endif]-->

除了在附加外部样式表时在<link>标记中使用媒体查询，您也可以将它们与@import和@media结合使用。基本语法是相同的。例如，以下代码导入一个样式表，并将该样式应用到拥有不宽于400像素的屏幕的设备：

@import url("phone.css") only screen and (max-width:400px);

媒体查询也可像如下这样用于样式表中：

@media only screen and (max-width:400px) { 
    #navbar { 
        float: none; 
        width: 400px; 
    } 
}

关注