CSS3 Media Queries 实现响应式设计

Max Width

下面的样式会在可视区域的宽度小于 600px 的时候被应用。

1
2
3
4
5
@media screen and (max-width600px) {
  .class {
    background#ccc;
  }
}

如果你想链接到一个单独的样式表,把下面的代码放在<head>标签里。

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

Min Width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

1
2
3
4
5
@media screen and (min-width900px) {
  .class {
    background#666;
  }
}

Multiple Media Queries

你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

1
2
3
4
5
@media screen and (min-width600px) and (max-width900px) {
  .class {
    background#333;
  }
}

Device Width

下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)

1
2
3
4
5
@media screen and (max-device-width480px) {
  .class {
    background#000;
  }
} 

For iPhone 4

下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

1
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" /> 

For iPad

你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) (作者: Cloud Four)。

1
2
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> 

Media Queries for IE

遗憾是的,IE8 及更老版本的浏览器不支持 CSS3 Media Queries,不过可以使用 Javascript  弥补,下面是一些解决方案:

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。