原文网址：https://www.youyong.top/article/1158d21fba20
做手机页面的前端经常遇到这样的问题：
设计通常以640的宽度做设计图，标注的时候都标注的是px
如果按照标注的px来写页面，在不同分辨率的手机上显示效果不尽相同，为了达到更好的显示效果，不得不多次调整页面，甚至裁剪内容
下面就用一种新的方法来解决这个问题
原文网址：https://www.youyong.top/article/1158d21fba20
新的方法
淘宝是怎么解决这个问题的，可参考这个：
https://github.com/amfe/article/issues/17
基本用的也是rem，下面说说我们是怎么用的？
rem
W3C官网描述是“font size of the root element”，即rem是相对于根元素。
px是绝对值，rem相对值，比如我们把根元素的front-size设置成16px, 那么2rem就是32px，根元素的front-size设置成32px, 那么2rem就是64px。
聪明的人看到这里也许就明白了，给分辨率不同的手机设置不同的front-size, 把页面元素的宽高间隙等用rem来标注，这样元素在不同分辨率的页面上显示的比例就是一样的了。
比如：
分辨率 320px 640px
根front-size 16px 32px
div的宽度 10rem | 160px 10rem | 320px
可以看到div在320px的手机里 占到了50％的空间，在640px的手机里也占到了50%的空间。
那么这个根的front-size怎么确定那？
我们是这么做的：
把整个屏幕分成20份
原因：设计是640出图的，640/20=32px, 一份是32px，这样设计比较好计算
如果分辨率是320px，那么根的front-size就是16px，
如果分辨率是375px，那么根的front-size就是18.75px。
这种方式让每个元素在手机里占的比例是一定的。
那它和百分比的布局有什么区别的？
百分比的布局：
每个百分比都是相对父元素的。有些标签嵌套多层，计算有点繁琐
只能在宽度上应用百分比，高度上最顶层的父元素就不能用百分比 比如页面上边的banner条，rem的方式下我可以设置高度是2rem, 百分比的模式我写多少合适那；页面内有一个长方形按钮，宽高的比例是3:2，用百分比的方式怎么实现那
剩下的任务就是为不同的页面设置不同的front-size
在页面头部加上这样一段js即可：
!function(n){var e=n.document,t=e.documentElement,i=720,d=i/36,o="orientationchange"in n?"orientationchange":"resize",a=function(){var n=t.clientWidth||320;n>720&&(n=720),t.style.fontSize=n/d+"px"};e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a(),!1))}(window);
rem化有两个好处：
页面效果更接近于设计出的图
整体的工作效率提高了，极大的减轻了前端的工作量。
设计的工作量稍微加大了一些，因为要把比例标出来。
比如，在640的设计稿上，有个图片的宽度是64px, 就要标注 32*2，而前端写css的时候直接写width: 2rem即可。
比如有个字体是16px, 就要标注 32*0.5， 前端写：front-size: 0.5rem。
可以尝试弄一个rem版的bootstrap，给大家试使用！
