响应式布局
Max Width
下面的样式会在可视区域的宽度小于 600px 的时候被应用。（放在<style>里面）
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;
}
}
学习笔记
