CSS3 Media Queries 实现响应式设计
Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。
|
1
2
3
4
5
|
@media screen and (max-width: 600px) { .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-width: 900px) { .class { background: #666; }} |
Multiple Media Queries
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
|
1
2
3
4
5
|
@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; }} |
Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）
|
1
2
3
4
5
|
@media screen and (max-device-width: 480px) { .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 弥补，下面是一些解决方案：
