国内最全IT社区平台联系我们 | 收藏本站

华晨云

阿里云优惠2

您当前位置：首页 > web前端 > htmlcss > CSS3 Media Queries，媒介设备查询

CSS3 Media Queries，媒介设备查询

来源：程序员人生发布时间：2013-11-24 16:16:09 阅读次数：3260次

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

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

最大宽度

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

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

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

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

最小宽度

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

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

多媒介查询

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

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

设备宽度

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

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

iPhone 4 专用

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

<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）

<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 解决方案
不幸的事，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 和右侧栏移至顶部，另一个侧边栏移至底部）

CSS3 Media Queries

Colly

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

CSS3 Media Queries

A List Apart

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

CSS3 Media Queries

Tee Gallery

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

CSS3 Media Queries

总结

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

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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

程序员人生

------分隔线----------------------------

上一篇 Ubuntu server 上建立 nfs 服务器的步骤

下一篇 详解：xp系统同时安装sql2000和sql2005

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点

程序员人生