rem自适应

简介

「rem」是指根元素（root element，html）的字体大小，从遥远的 IE6 到版本到 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。

rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小；

所以1rem*16(这个是html的fontsize)=16px;

2rem*16=32px;

要想让rem和px成100倍的关系，即1rem100=100px；则html的字体大小就应该是100px*；

判断

<script>
        (function(){
        var a=document.documentElement.clientWidth||document.body.clientWidth;
        if(a>460){
        	a=460
        }
      	else{
      		if(a<320){
      			a=320
      		}
      	}
      	document.documentElement.style.fontSize=(a/7.5)*1+"px"})();
</script>

简单来说

1 按照一个常使用的尺寸作图写html和css 和一个固定font-size尺寸

2 按照公式
//在js计算字体大小，x为缩小比例
400/600=x/10
x=6.6
即
现在屏幕宽度/设计图屏幕宽度=现在的font-size大小/设计图的font-size

移动端常用rpx(微信小程序)， upx(uniapp) + flex来做自适应

pc端是rem + 媒介 + 百分比