CSS3 Media Queries，媒介设备查询_html-js-css

概述允许通过 media 属性为不同媒介设备（如屏幕、打印机）指定专用样式表，而 CSS3 通过 media queries 使得更为行之有效。你可以为媒介类型添加某些查询条件用以检测设备，并采用不同的样式表。例如，你可以有一个大屏幕显示器的专用样式和一个移动设备的专用样式。这将非常强大，因为它允许不同的设… @H_301_2@@H_301_2@允许通过 media 属性为不同媒介设备（如屏幕、打印机）指定专用样式表，而 CSS3 通过 media querIEs 使得更为行之有效。你可以为媒介类型添加某些查询条件用以检测设备，并采用不同的样式表。例如，你可以有一个大屏幕显示器的专用样式和一个移动设备的专用样式。这将非常强大，因为它允许不同的设备使用不同的界面外观，但并不改变你的文档内容。阅读这篇文章来了解一下国外已经良好应用 media querIEs 的网站案例。

CSS3 Media QuerIEs (演示稿)
点击这个演示稿并且缩放的你浏览器窗口尺寸，观察页面元素的动态变化。

最大宽度

如果可视区域宽度小于 600 像素，以下 CSS 将被应用。

@media screen and (max-wIDth: 600px) {
.class {
background: #ccc;
}
}@H_301_2@

如果你想要引入独立的样式表，可以在 <head> 标签对之间插入以下代码行。

<@R_502_6862@ rel="stylesheet" media="screen and (max-wIDth: 600px)" href="small.CSS" />@H_301_2@

最小宽度

如果可视区域宽度大于 900 像素，以下 CSS 将被应用。

@media screen and (min-wIDth: 900px) {
.class {
background: #666;
}
}@H_301_2@

多媒介查询

你可以组合多个媒介类型查询，如果可视区域宽度介于 600 像素至 900 像素，以下代码将被应用。

@media screen and (min-wIDth: 600px) and (max-wIDth: 900px) {
.class {
background: #333;
}
}@H_301_2@

设备宽度

如果设备最大宽度为 480 像素（如 iPhone），以下代码将被应用。注：最大设备宽度意味着设备的实际可视面积，最大宽度意味着可视区域面积。

@media screen and (max-device-wIDth: 480px) {
.class {
background: #000;
}
}@H_301_2@

iPhone 4 专用

以下代码为 iPhone 4 专用。（案例：Thomas MaIEr）

<@R_502_6862@ rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/CSS" href="iphone4.CSS" />@H_301_2@

iPad 专用

你也可以使用 media querIEs 来检测 iPad 上横向纵向坐标。（案例：Cloud Four）

<@R_502_6862@ rel="stylesheet" media="all and (orIEntation:portrait)" href="portrait.CSS">
<@R_502_6862@ rel="stylesheet" media="all and (orIEntation:landscape)" href="landscape.CSS">@H_301_2@

Internet Explorer 的 Media QuerIEs 解决方案
不幸的事，Internet Explorer 8 或更早的版本并不支持 media querIEs。你可以使用 JavaScript 来弥补这一缺陷。以下是几个解决方案：

1、CSS Tricks – using jquery to detect browser size
2、The Man in Blue – using JavaScript (这篇文章写于六年前)
3、jquery Media QuerIEs Plugin

案例站点

你必须在支持 media querIEs 的高级浏览器如 firefox、Chrome、Safari 中浏览以下站点。看看随着窗口尺寸改变时，这些页面布局是如何响应的。

Hicksdesign

大尺寸：三栏式侧边栏
小尺寸：两栏式侧边栏（中间栏沉入左侧栏）
更小尺寸：一栏式侧边栏（右侧栏移至 logo 右方）
最小尺寸：没有侧边栏（logo 和右侧栏移至顶部，另一个侧边栏移至底部）

Colly

根据浏览器可视区域的尺寸，布局在一栏式、两栏式和四栏式之间切换。

A List Apart

大尺寸：导航在顶部，一排图片
中尺寸：导航在左侧，三列图片
小尺寸：导航在顶部，logo 没有背景图片，三列图片

Tee gallery

这个和上述 Colly 案例非常相似，但是不同之处在于 Tee gallery 中的图片会随着窗口尺寸变化d性地自适应。这里的技巧是使用百分比宽度，而不使用固定像素宽度。

总结

请记住：拥有优化过的移动版样式表并不意味着移动版网站的优化。真正的移动设备优化，图片和标记语言也必须被缩减到最小，Media querIEs 目的是为设计表现，而不是优化。

英文原稿：CSS3 Media QuerIEs | WebDesignerWall
翻译整理：CSS3 Media QuerIEs，媒介设备查询 | 芒果

总结

以上是内存溢出为你收集整理的CSS3 Media Queries，媒介设备查询全部内容，希望文章能够帮你解决CSS3 Media Queries，媒介设备查询所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1020662.html

CSS3 Media Queries，媒介设备查询

发表评论

评论列表（0条）