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

www.zhimatong.com时间:2019-10-25阅读:3次

<!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>

Hi, 欢迎加入DedeCMS技术交流群,带你装逼带你飞!

我要入群