关于rem布局

Posted 2020-10-10 嘿你的益达

1. 实际UI设计稿给过来为了在手机屏幕上显示清晰，设计稿通常为实际标准手机页面的2倍，一般为640px（以ip5的屏幕尺寸320px设计）或者750px（以ip6的屏幕尺寸为375px设计），这是前提。
2. rem，即根元素字体大小，网页的根元素就是html，也就是html的字体大小。在初始设置css时为了后续的计算方便一般将根元素大小设置为10px或者20px。又因为浏览器最小字体限制12px，所以还要加一段代码：

   html{
     text-size-adjust:none;
     -webkit-text-size-adjust:none;
     font-size:10px;
   }

   注：因为所有的浏览器默认字体大小都是16px，所以我们也可以设置html的fontsize为62.5% （10/16*100%）;

3. 这样，1rem对应的就是实际10px大小，所以如果此时我们在写样式，在浏览器上以ip5为模板展现的时候，从设计稿上量长宽时设计稿上测量的大小，首先要除以2（得到实际设计稿下的尺寸），再除以我们自己设置的根字节大小，就得到单位为rem的尺寸。
4. 以上样式写好之后在浏览器尺寸为ip5上可以完整展现，但是如果此时换成其他尺寸的手机屏幕大小，就不能直接用这个数值展现（设计稿只对应ip5），加两步，将此时的rem根据屏幕的尺寸倍数变化自己

   <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
   <!--在移动端的发展过程中，早期的手机为了正常显示pc页面，手机默认的viewport的宽度并不是手机屏幕的宽度，一般默认的viewport宽度为980px，当然也有手机默认的宽度为1280px。这样如果你不把viewport的宽度设置为device-width的话，window.innerWidth就是默认值980px或者是1280px。这样我们上一段代码就有问题了。我们使用window.innerWidth获取的并不是屏幕的宽度。-->

   (function(){
     var scale = window.innerWidth/320; //屏幕变化倍数
     document.documentElement.style.fontSize = 10*scale+"px";//根字节变化倍数，实际的rem不用变
   })()