首页 > 代码库 > css响应式布局RWD
css响应式布局RWD
响应式布局结合了三大理念:
1)用于布局的弹性网络(百分比定义宽度)
2)用于图片和视频的弹性媒体
3)媒体查询
在布局中,需要注意的点有:
1)尽量用min-width/max-width,max-height/min-height代替width,height
2)尽量使用百分比,em为单位代替精确值
3)采用媒体查询
二、媒体查询
IE8以下不支持媒体查询,需要引入
<!-- if lte IE 8><script src="http://www.mamicode.com/response.min.js"></script><![endif]-->
媒体查询需要设置断点,常见的断点如480px,769px等。也可以逐渐缩小浏览器的宽度,观察布局效果来引入。
媒体查询引入的方式有两种
1)通过link标签引入
<link rel="stylesheet" href="http://www.mamicode.com/css/small.css" media="(max-width:480x)"><link rel="stylesheet" href="http://www.mamicode.com/css/large.css" media="(min-width:769x)"><link rel="stylesheet" href="http://www.mamicode.com/css/large.css" media="(min-width:480px) and max-width(768px)">
2)将查询包含在样式表中
@media(max-width:480px){}@media(min-width:480px) and (max-width:768px){}@media(min-width:769px){}
css响应式布局RWD
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。