A-A+

对比总结em和rem

2018年09月22日 CSS 暂无评论

一、无聊

CSS比较难深入,不易精通。也不知道怎么深入学,那就做点好玩的东西吧,几个月前用css3画了一个大白,如下图:

今天就想再画个QQ的那个企鹅logo,开干之前突然就想到一个问题,这个大白,怎么能实现可配置缩放。

首先我想到的就是使用比例单位 em 和 rem。

二、em初印象

想到em我脑瓜里浮现出来的信息有几个:

1、和父级font-size有关(为什么是父级的?和自身没关系?);

2、她是个比例单位;

惭愧捂脸,虽然入行前端开发也有3年有余了,对这个自认为很基础的单位,竟然就知道这么多。

em的相对font-size到底指的是谁?

经过测试发现:

1,元素本身设置的font-size会影响 em;

2,当元素本身没有设置font-size时,父级的font-size起作用,影响em;

由此,恍然大悟,其实em是相对自身元素的font-size起作用的,因为font-size可以继承父级的属性,所以当自己没有设置font-size时,就好像是父级的影响了em。

浏览器的字体有一个最小限制12px,会影响em吗?

废话不说,还是写个demo试一下。

还是刚才那个demo,截图可以看出来,当font-size设置为10px的时候,出问题了,div的宽高仍然是12px,这就说明,浏览器的最小字体限制会影响em,也就是说1em默认最小是12px。

好了,对em的研究先到这,先看介绍下rem。

三、rem再回顾

rem可以理解为(root+em),也就是相对于跟字体大小的相对单位。在做移动端开发的时候,需要进行自适应布局,这个应用那是很熟悉了。现在回顾仔细研究,就来了问题了。

1、浏览器自己最小显示,影响rem吗?

2,如果影响,在开发中怎么避免?

这里我偷个懒,就不截图了,rem,的相对根元素的字体大小设置为10px时,1rem = 12px;

显然这个浏览器最小字体显示是绕不过去的。那再开发中这个会有什么影响?

 

四、如何解决最小字体12px对em和rem的影响?

说到影响,我想影响较大的应该是rem,为什么这说说呢?因为在开发中,特别是PC段的页面开发,根HTMl的font-size一般

都是通过js动态计算进去的,这个就有一定的风险计算出的值小于12,使得页面缩放失效,形成bug。

 

我觉得,在进行页面布局时,为了避免此问题,可以在开发时候,增大html元素的font-size,也就是增大 1rem 对应的值。

例如:正常情况下,我的布局基准是 1rem = 10px,这个数值比较容易计算。为了防止font-size<12,我可以设置 1rem = 100px;页面布局的基数就是按照100来计算,所有的页面实际尺寸都除以100,来进行布局。

这样就可以有效防止font-size,小于12。

 

应该还有其他更有效的方式解决此问题,后面有发现在更新。

END

就这么多吧,一点小总结。

给我留言

Copyright © 郭晨光 保留所有权利.  
粤ICP备19005744号

用户登录