CSS3 Media Queries，媒介设备查询
|
副标题[/!--empirenews.page--]
允许通过 media 属性为不同媒介设备（如屏幕、打印机）指定专用样式表，而 CSS3 通过 media queries 使得更为行之有效。你可以为媒介类型添加某些查询条件用以检测设备，并采用不同的样式表。例如，你可以有一个大屏幕显示器的专用样式和一个移动设备的专用样式。这将非常强大，因为它允许不同的设备使用不同的界面外观，但并不改变你的文档内容。阅读这篇文章来了解一下国外已经良好应用 media queries 的网站案例。
CSS3 Media Queries (演示稿) 最大宽度 如果可视区域宽度小于 600 像素，以下 CSS 将被应用。 Copy to Clipboard 引用的内容：[www.veryhuo.com]
@media screen and (max-width: 600px) { .class { background: #ccc; } } 如果你想要引入独立的样式表，可以在 <head> 标签对之间插入以下代码行。 Copy to Clipboard引用的内容：[www.veryhuo.com]
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
最小宽度 如果可视区域宽度大于 900 像素，以下 CSS 将被应用。 Copy to Clipboard引用的内容：[www.veryhuo.com]
@media screen and (min-width: 900px) { .class { background: #666; } } 多媒介查询 你可以组合多个媒介类型查询，如果可视区域宽度介于 600 像素至 900 像素，以下代码将被应用。 Copy to Clipboard引用的内容：[www.veryhuo.com]
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } } 设备宽度 如果设备最大宽度为 480 像素（如 iPhone），以下代码将被应用。注：最大设备宽度意味着设备的实际可视面积，最大宽度意味着可视区域面积。 Copy to Clipboard引用的内容：[www.veryhuo.com]
@media screen and (max-device-width: 480px) { .class { background: #000; } } iPhone 4 专用 以下代码为 iPhone 4 专用。（案例：Thomas Maier） Copy to Clipboard引用的内容：[www.veryhuo.com]
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
iPad 专用 你也可以使用 media queries 来检测 iPad 上横向纵向坐标。（案例：Cloud Four） Copy to Clipboard引用的内容：[www.veryhuo.com]
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> Internet Explorer 的 Media Queries 解决方案 1、CSS Tricks – using jQuery to detect browser size 案例站点 你必须在支持 media queries 的高级浏览器如 Firefox、Chrome、Safari 中浏览以下站点。看看随着窗口尺寸改变时，这些页面布局是如何响应的。 Hicksdesign 大尺寸： 三栏式侧边栏
Colly （编辑：威海站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
