您的位置：首页 > Web前端 > CSS

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

2017-11-18 11:11 726 查看 
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航