使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
浏览器支持：
style.css
/* CSS Document */
.test{ width:100%; height:400px;}
/*下面的样式会在可视区域的宽度小于 599px 的时候被应用。*/
@media screen and (max-width: 599px) {
.test {
background: #f60;
}
}
/*下面的样式会在可视区域的宽度大于 901px 的时候被应用。*/
@media screen and (min-width: 901px) {
.test {
background: #06f;
}
}
/*你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。*/
@media screen and (min-width: 600px) and (max-width: 900px) {
.test {
background: #f06;
}
}
demo.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>CSS3 媒体查询</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="test"> </div> </body> </html>
demo2.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="basic.css"> <link rel="stylesheet" media="screen and (max-width: 599px)" href="max599.css" /> <link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 900px)" href="min600max900.css" /> <link rel="stylesheet" media="screen and (min-width: 901px)" href="min901.css" /> <title>CSS3 媒体查询</title> </head> <body> <div class="test"> </div> </body> </html>
效果图：