一行代码解决移动端适配问题

相信很多朋友都有过被移动端适配支配的恐惧吧，这里给大家介绍一下只用一行代码就解决移动端适配的问题。
话不多说上代码

//只用在css文件中加上
:root {
	font-size:13.33333vw;//加上这一行代码后1rem = 100px；
}

为什么一行代码就能够实现移动端的适配呢？
首先要先说明：移动端的设计稿一般是width：750px，height：auto（这里指的是不确定），100vw = 100%，这个也没有问题吧；那么，设计稿拿过来，我们可以得出：750px = 100vw，这个也没有问题吧，那么1px等于多少vw呢？ 是不是 1px = 100 / 750 vw = 0.13333vw；那么100px = 多少vw呢，这个应该知道了吧。100px = 13.33vw；

mobile.width = 750px => 750px = 100% =100vw => 750px = 100vw => 1px = 0.1333vw => 100px = 13.33vw => 1rem =100px;

在这里我们也可以去使用js来控制rem， js控制rem的适配.

const setHtmlFontSize=()=>{
  const htmlDom = document.getElementsByTagName('html')[0];
  let htmlWidth = document.documentElement.clientWidth||document.body.clientWidth;
  if(htmlWidth >=750){
    htmlWidth = 750;
  }
  if(htmlWidth <=320){
    htmlWidth = 320;
  }
  htmlDom.style.fontSize = `${htmlWidth/750}px`;
//  后面需要加table键上面的那个字符（``），从＄开始到px结束
  //在750px的手机屏幕下，1rem=1px；
}
window.onresize = setHtmlFontSize;
setHtmlFontSize();