首页 > 代码库 > 响应式布局的应用
响应式布局的应用
响应式的优点和缺点：
优点：
1、面对不同分辨率设备灵活性强。
2、能够快捷解决多设备显示适应问题。
缺点：
1、兼容各种设备工作量大，效率低下。
2、代码累赘，会出现隐藏无用的元素，加载时间加长。
响应式的设计有三种方法：
1、使用Meta标签
2、通过使用媒体查询设置样式@Media
3、设置视图的宽度 通过百分比
响应式的步骤：
1、使用Meta标签
大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2、通过使用媒体查询设置样式@Media
@media screen and (min-width:640px)and(max-width:960px)
这句的意思是在大于640小于960的分辨率下所激活的样式表，这个语句就是响应式布局的基础应用了。在判断终端分辨率大小后，赋予不同的样式进去，就像下面的例子：
@media screen and(max-width:560px){
body{}
}
最大是560的分辨率
@media screen and (min-width:640px)and(max-width:960px){
body{}
}
640到960之间的分辨率
3、设置视图的宽度
通过百分比控制宽度也能实现响应式,不用像素px这种固定的单位来控制，也可以使用em来定义
例如：#heade{width:100%}
#footer{width:60%;}
响应式布局的应用