您现在的位置:牛思建站>技术教程>Div+Css教程>

DEDECMS下载
最新DEDECMS V5.7 UTF改进版
点击下载
DEDECMS下载
最新DEDECMS V5.7 GBK改进版
点击下载

使用CSS3的@media来实现网页自适应

摘要:!doctype html html head meta charset=utf-8 title流体布局自适应/title style type=text/css *{ padding:0 auto; margin:0 auto; } @media screen and (min-width: 1201px) { .naavp { color:#000 !important;} body{background:green;} .two{ display:non
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>流体布局自适应</title>
<style type="text/css">
*{
padding:0 auto;
margin:0 auto;
}
@media screen and (min-width: 1201px) {
.naavp { color:#000 !important;}
body{background:green;}
.two{ display:none; }
.one{ display:block; }
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.naavp { color:#000 !important;}
.two{ display:none; }
body{background:red;}
.one{ display:block; }
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */

@media screen and (max-width: 900px) {
.one{ display:none; }
body{background:yellow;}
body{background:pink;}
.two{ display:block; }
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.one{ display:none; }
.two{ display:block; }
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
</body>
</html>

转载请注明来自:牛思建站 » 使用CSS3的@media来实现网页自适应