1.使用内联样式的用法
在<head>标签中使用style,使用@media指定对应屏幕分辨率大小的样式
<head lang="en">
<meta charset="UTF-8">
<title>响应式布局示例</title>
<style>
@media screen and (min-width: 800px) {
body {
background-color: red;
}
}
@media screen and (max-width: 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-width:800px)"> <link href="css/responsive2.css" rel="stylesheet" type="text/css" media="only screen and (max-width: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-width: 600px) {
body {
background: blue;
}
}
@media screen and (min-width: 900px) {
body {
background: red;
}
}
这样只需 在一个文件里声明,对应每个需要设置的样式可以单独设置
参考文章http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html
时间： 2024-10-30 14:34:41