响应式布局基础三：webapp布局

上一遍文章讲到了viewport，但是通过效果图我们可以看出来，有部分网页内容超出浏览器的宽度，以至于浏览器出现水平滚动条。

这一遍文章主要就是来解决这个问题。

第一种是：设置viewport，高度固定，宽度使用百分比

这种对于简单的列表形比较实用。这种布局方式，通过要为高度进行响应式。

第二种是：设置viewport，宽度和高度都固定，利用浏览器本身的功能进行缩放

这种布局方式不仅适合列表方式，也可以适用于一些复杂的布局。

根据设计稿的大小，直接设计viewport中的width为设计稿的像素宽度即可。然后原生的高宽均按照设计稿中的要求设计即可。

当设备的像素高或低于我们的viewport width的时候，浏览器会自己进行缩放的。（极少部分浏览器无法进行缩放，这个时候可以使用脚本进行动态设置viewport）。

第三种是：动态设置viewport，高宽度都使用相对单位

同第二种一样，适合于复杂的布局。

根据设计稿将各元素的单位换算成rem，然后根据屏幕大小，换算html的font-size。

参考资料：

MobileWeb 适配总结 

移动端适配方案(下)