关于rem布局和viewport布局的总结

原创 15727572247 随笔 移动端布局 697阅读 2018-03-28 22:43:39 举报

1、首先看一下viewport布局是怎么回事?
通过手动创建一个mata标签,然后设置initial-scale来控制viewport的缩放。下面有一个例子:假设公司的ui给我一张宽度是750px的设计稿,我通过viewport做一个适配:

2、然后看第二个rem布局:
他的中心思想就是把当前的设计稿平分为等份(比如淘宝的10份,我中意的16份),下面的例子是分成16份。然后设置根目录的fontSize为手机理想视口宽度的1/16,那么对应的宽度就用这个根目录去做数学算法。原理同样是createElement一个style标签,然后给他设置值html{font-size:width/16px !important;}.
不多说,上代码:

3、那我们程序员可是很懒的,总想做一些简单的工作。额,那么有没有人把这两种布局的优势捆绑在一起了呢?这个啊,还真有。淘宝就是这样做的,然后我在github上面找到了一个小型的仿淘宝布局的库,拿出来练练,因为这些viewport的js逻辑或者是设置根目录的字体大小逻辑它全部帮你搞定了。不多说看代码:

最后做一个总结:就是在程序员的世界里,只要能想得到的又有人或者将要有人给做了或者准备做了,有一双发现美的眼睛,把这些整合起来,这会让造轮子的人很开心。

评论 ( 1 )
最新评论
15727572247 2018-03-29 09:46:52 1F

抱歉,最后一个合成的demo因为注释的原因出现问题,现在已经修改过来了!