rem em

Posted 永阳

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了rem em相关的知识,希望对你有一定的参考价值。

介绍: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是继承父元素的字体大小,可是当父元素字体大小改变时,又得重新计算了,这不怎么方便,

以上是关于rem em的主要内容,如果未能解决你的问题,请参考以下文章

em,rem

css中em和rem的区别

CSS3中的rem、em与px间的换算关系

rem和em的用法

px em rem 的区别

响应式设计之 —— em 和 rem