rem em

Posted 2020-10-31 永阳

介绍：rem是相对字体单位；根据html根元素大小而定，同样可作为宽高等单位；

适配原理：将px替换成rem，采用rem适配移动web的原理，根据不同屏幕宽度设置html的font-size的大小；

计算公式：1rem=html的font-size(浏览器默认font-sizt:16px)；

动态修改font-size方法：

       [email protected]查询

        @media screen and(max-width:300px) and(min-width:200px){

              html{

                     font-sizt:20px;

                     }

        }

        这种方式比较麻烦，因为移动端需要是配的手机型号太多；

       2、js设置font-size

           获取视窗：  let  win_width=document.documentElement.clientWidth ||  document.body.clientWidth;

           获取html:     let  htmlDom=document.getElementsByTag("html")[0];

           设置属性：    htmlDom.style.fontSize=win_width/10+"px";

        

 

em

是相对长度单位。相对于当前对象内文本的字体尺寸；如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸

em单位有如下特点

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算了，这不怎么方便，