关于移动端rem的设置

关于移动端rem的设置

最近才开始做移动端的项目，以前理论上的rem终于付诸于实践了，hummmm……

rem相对于根元素的font-size进行计算，写文记录一下如何设置根元素使得我们能快速根据计算稿计算出最终对应的rem的值。

先给出结论公式-------公式：root = (设备宽度 / 设计稿宽度) * 基准值

problem

如何从设计稿给的值就能简单计算得出最终渲染rem的值。

（1）通常情况下，根root = 16px，所以1rem = 16px ======> 导致计算困难。例如有207px的设计稿，对应的rem = 207/16 …… （2）设计稿通常不会是我们设备的大小，而是会设定成设备的2倍稿或者是3倍稿。比如基于iphone6（375px）的设计稿大多是750px。我们在进行计算的时候需要把设计稿里面的宽高除以对应的倍数，很麻烦。

solution

最终想要的效果是 设计稿的值 --> 简单计算 ---> 正确的rem

1.简单计算: 现在的基准数是16，因此计算困难。我们想让基准值完全由自己指定

2.正确的rem：即简化之后得出的rem = 我们复杂计算得出的rem相等

确定上述两个条件后，根据第二个条件列出等式（设y是设计稿上待计算的元素的宽度，设root 是根的font-size）

简化后得出的最终rem = y / 基准值

简化前得出的最终rem = (y * (设备宽度 / 设计稿宽度)) / root y / 基准值 = (y * (设备宽度 / 设计稿宽度)) / root

化简后得到最终公式

root = (设备宽度 / 设计稿宽度) * 基准值

例： 设备宽度为375，设计稿宽度750，你想计算rem的时候只需要把设计稿上的值直接➗100（基准值 = 100），那么你把根元素的font-size设置为 350/750*100 = 50 即可。

给出两段参考代码

我们在进行开发的时候把计算得出的root-font-size给到根html即可。

!function(n){
                var  e=n.document,
                     t=e.documentElement,
                     i=640,
                     d=i/100,
                     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);
复制代码

//https://github.com/jieyou/rem_layout
!function(a,b,c){function q(){var d=Math.min((o?e[h]().width:f.innerWidth)/(a/b),c);d!=p&&(k.innerHTML="html{font-size:"+d+"px!important;"+n+"}",p=d)}function r(){clearTimeout(l),l=setTimeout(q,500)}var l,d=document,e=d.documentElement,f=window,g="addEventListener",h="getBoundingClientRect",i="pageshow",j=d.head||d.getElementsByTagName("HEAD")[0],k=d.createElement("STYLE"),m="text-size-adjust:100%;",n="-webkit-"+m+"-moz-"+m+"-ms-"+m+"-o-"+m+m,o=h in e,p=null;a=a||320,b=b||16,c=c||32,j.appendChild(k),d[g]("DOMContentLoaded",q,!1),"on"+i in f?f[g](i,function(a){a.persisted&&r()},!1):f[g]("load",r,!1),f[g]("resize",r,!1),q()}(
                    720, // 设置设计稿基准宽度
                    36, // 设置开发时的被除数（见HOW TO USE第4步） 在设计稿基准宽度为320时最好设置为16（在在设计稿基准宽度为其他值时等比放大，如640时设置为32等）。因为浏览器默认的值就是16，这样代码失效或尚未起效时，不会有布局问题
                    32 // 设置最大根元素font-size，请注意这是一个css像素值，而非物理像素值。它的作用是，当用户用非常宽的屏幕（pad、pc）访问页面时，不至于使得根元素的font-size超过这个值，使得布局非常难看。见图“show/wide_max_rem.jpg”
            );
复制代码

转载于:https://juejin.im/post/5bcc7122e51d457a4f63143c