CSS3的响应式布局Home / HTML/CSS / CSS3的响应式布局
浏览数：35 /
时间：2015年06月09日
做手机端网页需要用到响应式布局，首先需要再HTML文件头声明一下：
主要目的是宽度控制和禁止用户缩放，具体参数自己GOOGLE一下。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
下面是CSS判断是PC端还是移动端
其实很简单，用CSS3的媒体查询就可以非常方便去实现，不需要用userAgent神马的那么麻烦。
/*最小宽度800就是PC端*/
@media all and (min-width: 800px) {
#nav {
width: 300px;
float: left;
margin-right: 20px;
}
#grid {
width: 450px;
float: left;
}
}
/*最大宽度799就是移动端*/
@media all and (max-width: 799px) {
#nav {
width: 100%;
}
#grid {
width: 100%;
}
}
知道了上面2点就可以实现响应式布局了，是不是非常简单？
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
