移动端弹性布局(rem)解决方案
问题
设计稿宽度为640(iPhone 4为基准)、750(iPhone 6为基准),怎样合理布局?
不同设备、不同宽度(甚至是横屏),如何处理容器比例?宽度可以用百分比,高度呢?
同上,如何处理字号?所有设备都是相同字号?
设计师的1px边框,如何实现?
解决
rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数
js获取网页宽度,计算html合适的字号,实现弹性模块、边距、字号等
js动态计算viewport的initial-scale初始缩放值,实现1px边框
示例
用法
把<head>里<meta name="viewport">删掉,在此位置加本js,建议对本js做内敛处理
js里默认设计稿宽度为dd = 640,请根据需求自行替换(代码有压缩,请搜索640)
rem=px/100。例如设计稿里div宽度640px、