移动端rem使用

Posted 2020-10-29 魏耀峰

<!--
rem CSS3新增的一个相对单位，相对于根节点(html)字体大小的值 root
html{font-size:10px}    2rem=20px
通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖html字体的大小
-->

第一种方式：多分辨率设定rem设定　（不同的分辨率不同的大小，例如iPhone6中，1rem=23px）

/*Note3*/
@media only screen and (min-width:360px){
    html{font-size:22px!important;}
}
/*iPhone6*/
@media only screen and (min-width:376px){
    html{font-size:23px!important;}
}
/*iPhone6 plus*/
@media only screen and (min-width:414px){
    html{font-size:25px!important;}
}
/*big Resolution*/
@media only screen and (min-width:641px){
    html{font-size:25px!important;}
}

 

第二种方式：js实现，比如你的设计图是1080px的，那么你用1080/18=60px,1rem=60px

<!--
rem布局

1、必需动态的去设置html的大小，才能适配
2、根据页面(注意：是psd图，也就是真实大小大)的宽度除以一个系数，把算出的这个值赋给html的font-size属性
1、为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成n份
2、不除一个数字的话，那1个rem就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算
3、这个系数，自己定。多少都可以，但是建议给一个能整除的值

特点：

1、所有有单位的属性会根据屏幕的尺寸自动计算大小
2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大
3、一般以iphone6为基准，以它的宽度750除上一个系数，再去算rem
-->

<script>
            (function(){
                var html=document.documentElement;
                var width=html.getBoundingClientRect().width;//获取窗口大小
                
                html.style.fontSize=width/18+‘px‘;
                
                // 设计图是1080px的 1rem=60
            })();
</script>