1.使用内联样式的用法
在<head>标签中使用style,使用@media指定对应屏幕分辨率大小的样式
<head lang="en"> <meta charset="UTF-8"> <title>响应式布局示例</title> <style> @media screen and (min- 800px) { body { background-color: red; } } @media screen and (max- 800px) { body { background-color: blue;; } } </style> </head>
这里分别使用了2个样式:当分辨率<=800时使用,背景色为blue;当分辨率>=800时使用,背景色为red;
2.使用外链样式表的引用
<link href="css/responsive1.css" rel="stylesheet" type="text/css" media="only screen and (min-800px)"> <link href="css/responsive2.css" rel="stylesheet" type="text/css" media="only screen and (max-800px)">
这里是指定了在不同分辨率下使用不同的CSS文件,效果和上面的一样.
3.同样的在同一个样式文件中声明
<meta name="viewport" content="width = device-width,initial-scale=1"/> <link href="css/responsive.css" rel="stylesheet" type="text/css"/>
body {
margin: 0px auto;
}
@media screen and (max- 600px) {
body {
background: blue;
}
}
@media screen and (min- 900px) {
body {
background: red;
}
}
这样只需 在一个文件里声明,对应每个需要设置的样式可以单独设置
参考文章http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html