什么是HTML5的媒体查询功能

媒体查询

从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型

1 2	`<link` `rel="stylesheet"` `type="text/css"` `href="site.css"` `media="screen"` `/>` `<link` `rel="stylesheet"` `type="text/css"` `href="print.css"` `media="print"` `/>`

在清单 1 中，media 属性定义了应该用于指定每种媒体类型的样式表：

screen 适用于计算机彩色屏幕。

print 适用于打印预览模式下查看的内容或者打印机打印的内容。

作为 CSS v3 规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。

媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。样式表中的媒体查询看起来如清单 2 中的示例所示。

清单 2. 媒体查询规则

@media all and (min-width: 800px) { ... }

根据清单 2 中的标记，所有最小水平屏幕宽度为 800 像素的屏幕（屏幕和打印等）都应使用如下 CSS 规则。该规则在示例中省略号所在的地方。对于该媒体查询：

@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。

(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

请注意，在清单 2 中，可以省略关键词 all 和 and。在将某个媒体查询应用于所有媒体类型时，会省略 all。后面的 and 也是可选的。使用简写语法重新编写媒体查询，如清单 3 所示。

清单 3. 简写语法

@media (min-width:800px) { ... }

媒体查询也可以包含复杂表达式。例如，如果您想要创建一个仅在最小宽度为 800 像素且最大宽度为 1200 像素时应用的样式，则需要按照清单 4 中的规则来做。

清单 4. 复杂表达式

@media (min-width:800px) and (max-width:1200px) { ... }

在您的表达式中，您可以根据自己的喜好使用任意数量的 and 条件。如果您想要增加其他条件来检查特定的屏幕方向，只需添加另一个 and 关键词，后跟 orientation 媒体查询，如清单 5 所示。

清单 5. and 条件

@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }

清单 5 中的媒体查询仅在宽度为 800 到 1200 像素且方向是纵向时才能激活。（通常，方向仅对能够轻易转换纵横模式的智能手机和平板电脑上是有意义的。）如果其中一个条件为 False，则无法应用媒体查询规则。

and 关键词的反义词是 or 关键词。和 and 一样，这些条件组合在一起会构成复杂表达式。如果其中有一个条件为 True，那么整个表达式或分离的两个条件都会为 True，如清单 6 所示。

清单 6. or 关键词

@media (min-width:800px) or (orientation:portrait) { ... }

如果宽度至少是 800 像素或方向是纵向的，则会应用该规则。

另一个保存在词库中的媒体查询关键词是 not。位于媒体查询的开始处，not 会忽略结果。换句话说，如果该查询本来在没有 not 关键词的情况下为 true，那么现在它将为 false。清单 7 展示一个示例。

清单 7. 使用 not

@media (not min-width:800px) { ... }

仅从英文意思上理解，清单 7 中代码的表示：当最小宽度不是 800 像素时，会应用下列 CSS 规则。这些示例只是将像素作为媒体查询中的测量单位，但是测量单位并不仅限于像素。您可以使用任何有效的 CSS 测量单位，比如厘米 (cm)、英寸 (in)、毫米 (mm) 等。

有用的媒体特性

媒体很多特性，比如宽度、颜色和网格，您可以在媒体查询中使用它们。对每个可能的媒体特性进行描述不在本文讨论范围内。关于媒体查询的文档 The World Wide Web Consortium's (W3C) 提供了这方面的一个完整清单。（请参阅参考资料）。

要设计响应式网站，只需要了解一些媒体特性：方向、宽度和高度。作为一个简单媒体特性，方向的值可以是 portrait 或 landscape。这些值适用于持有手机或平板电脑的用户，使您可以根据两个形状因素来优化内容。当高度大于长度时，则认为屏幕是纵向模式，当宽度大于高度时，则认为屏幕是横向模式。清单 8 显示了一个使用 orientation 媒体模式查询的示例。

清单 8. orientation 媒体查询

@media (orientation:portrait) { ... }

高度和宽度行为十分相似，都支持以 min- 和 max- 为前缀。清单 9 展示了一个有效的媒体查询。

清单 9. 高度和宽度媒体查询

@media (min-width:800px) and (min-height:400px) { ... }

如果没有 min- 或 max- 前缀，您还可以使用 width 和 height 媒体特性，如清单 10 所示。

清单 10. 不带 min- 和 max- 前缀

@media (width:800px) and (height:400px) { ... }

当屏幕正好是 800 像素宽、400 像素高时，可以使用清单 10 中的媒体查询。www.zzarea.com 现实中，像这样的媒体查询可能过于具体而不太有用。检测精确维度是大多数网站访问者都不可能遇到的一个场景。通常情况下，响应式设计会使用范围来执行屏幕检测。

作为媒体查询大小范围的后续内容，下一节将讨论一些常见的媒体查询，在设计一个响应式网站时，您可能会发现它们非常有用。

常见媒体查询

因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。

如果目标是横向模式智能手机，则使用： @media (min-width: 321px) { ... }

如果目标是纵向模式智能手机，则使用： @media (max-width: 320px) { ... }

如果目标是横向模式 Apple iPad，则使用： @media (orientation: landscape) { ... }

如果目标是纵向模式 iPad，则使用： @media (orientation: portrait) { ... }

您可能已经注意到了，iPad 上使用的是 orientation 媒体特性，而 width 用于 Apple iPhone 之上。主要是因为 iPhone 不支持 orientation 媒体特性。您必须使用 width 模拟这些方向断点。请参阅参考资料，获取有关常见媒体特性的更多信息。

什么是HTML5的媒体查询功能相关推荐

使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
html媒体查询怎么把颜色换成图片,为网页中图片src添加媒体查询功能。
为图片src 增加媒体查询. Css 中的媒体查询默认是没有为图片指定src,的但是如果页面中需要根据浏览器宽度指定图片src, 比如当电脑的时候,加载大图,手机的时候加载小图. 今天发现一个很棒的 ...
html5 视口,html5 – 在媒体查询中更改视口
接受的答案是正确的,但如果您正在使用jQuery并且jQuery需要准备好.在慢速连接上,您会遇到该代码的问题,因此您可能会收到"$"未定义的错误. 这就是我在这种情况下更喜欢纯J ...
前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询...
前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"><head><meta ...
关于使用媒体查询@meda失效原因的总结或注意事项
最近在写自己的个人博客时遇到了一个小问题,为了解决响应式设计,便加入了媒体查询@meida来自适应各种大小的终端设备.但是在其中还发现了不少坑,在这里希望通过这篇文章分享给大家. 1.优先级的问题 d ...
媒体查询在html中怎么写,HTML5中的媒体查询
HTML5中的媒体查询时间:2014-6-6 在我看来,在网站设计领域,媒体查询一直是多年最大的促变因素-大概是因为CSS本身已成为主流,CSS的广泛采用允许我们抛弃那些刚性限制的基于表单的网站;然 ...
html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
HTML5 响应式网页设计之页面美化（二.媒体查询）
1.媒体查询媒体查询可以为不同媒介的类型设置不同的样式,大部分媒体特性都接受min和max属性只有当<meta name="viewport">视口标签存在的时候, ...
CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
css3 media媒体查询器用法总结
原文地址:http://www.cnblogs.com/zhaodifont/p/3858657.html 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6 ...

什么是HTML5的媒体查询功能

什么是HTML5的媒体查询功能相关推荐

最新文章

热门文章