芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
9

CSS3 Media Queries,媒介设备查询

作者 芒果/分类 代码/发布于 2010-08-19 00:13

CSS2 允许通过 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 和右侧栏移至顶部,另一个侧边栏移至底部)

screen capture

Colly

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

screen capture

A List Apart

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

screen capture

Tee Gallery

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

screen capture

总结

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

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

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css3-media-queries/" title="CSS3 Media Queries,媒介设备查询" rel="bookmark">CSS3 Media Queries,媒介设备查询 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 9 条群众意见

  1. 汽车导航仪哪个好 /2010-08-19 20:39

    还不是很了解 CSS2 回应

    #1
  2. 公司简介 /2010-08-23 16:19

    确实是不错~~~~~~ 回应

    #2
  3. 机票价格查询 /2010-08-24 17:24

    呵呵我 我正在在学 css…… 回应

    #3
  4. 乐友 /2010-08-24 19:19

    好个性啊。 回应

    #4
  5. 企业网站建设 /2010-08-25 09:01

    CSS3 已经开始了吗? 回应

    #5
  6. ?
    CSS3 Media Queries,媒介设备查询 | 以用户为中心的UI设计 /2010-08-26 22:26

    […] Media Queries | WebDesignerWall 翻译整理:CSS3 Media Queries,媒介设备查询 | 芒果 […] 回应

    #6
  7. 美白面膜推荐 /2010-10-18 09:51

    看不懂了! 回应

    #7
  8. 程序员之家 /2011-07-21 16:48

    兄弟 能否交换下链接啊 回应

    #8
  9. 程序员之家 /2011-07-21 16:48

    对了 我网站地址是 http://www.chengxuyuans.com 呵呵 回应

    #9

下面我简单说几句