rem适配移动端原理

rem适配移动端原理

	//现代浏览器本身的html根是16px，我们可以采用100/16*100% = 625%;的比例去换算rem
    //这样1rem=100px，这样子好换算
    // rem转换px 然后适应到其他设备原理
    这里以320px宽度的设备为标准去划分，其他宽度划分类似
    //然后再根据其他设备的宽度去设定其根值font-size大小
    //方式一：
    //这是一个例子
    @media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
        html { font-size: 703%; }
    }
    @media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {
        html { font-size: 732.4%; }
    }
    @media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {
        html { font-size: 750%; }
    }
    @media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
        html { font-size: 781.25%; }
    }
    @media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){
        html { font-size: 808.6%; }
    }
    @media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){
        html { font-size: 843.75%; }
    }
    这是根据  360/320*6.25 = 7.03 =》703%;
    其他依次
    //方式二：
    //如果是750的设计稿，即屏幕宽度为375的
    //公式为  屏幕宽度/设计稿rem宽度=页面动态font-size值（如：375/7.5=50）
    320/7.5 = 42.66667;
    //document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; 设定基准值
    
    //这样就设置好了每个页面的根fonts-size，因为rem单位是基于根font-size，因此只要确定一种设计稿对应手机的换算，其余屏幕尺寸均可自动适配。

    上面我们得出设计稿换算rem的基准值是100，因此只需要把设计稿上的px值除以100即为我们要的rem值。
    
    > Px/100=rem，所以100px=1rem,25px=0.25rem

参考文章：https://www.cnblogs.com/annie211/p/8118857.html

分份法

 // rem转换px 然后适应到其他设备原理
 //将设备的宽度分为10份，得到一个基础值
 // 这里分别是375/400/425的设备,将设备宽度分成10份对应
 750/10 = 75px;	//75px就是1rem
 375的设备 375/10 = 37.5px
 400/10 = 40px;
 425/10 = 42.5px;
 // 原图750宽，其中一个盒子为75px的时候
 75/75 = 1 rem;
 //在325的设备下
 37.5*1 = 37.5px;
 //在400的设备下
 40*1 = 40px;
 //在425的设备下
 42.5*1 = 42.5px;
 //原图750宽，其中一个盒子为30px的时候
 30/75 = 0.4rem;
 //375px设备
 37.5*0.4 = 15px;
 在400px设备时
 40*0.4 = 16px;
 在425px设备下
 42.5*0.4 = 17px;
 只要动态划分屏幕为10份设定html的font-size即可