首页 > 其他 > 详细

rem 、em

时间:2018-04-20 23:07:41      阅读:203      评论:0      收藏:0      [点我收藏+]

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

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

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

动态修改font-size方法

       1.@media查询

        @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

原文:https://www.cnblogs.com/yongyang/p/8893736.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!