em和rem的理解

落日映苍穹つ 2022-06-12 04:43 161阅读 0赞

之前对于这个内容有点模糊，现在总结一下。

em是根据父类的大小调整，根据代码举例说明

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		body{
    			font-size: 100%;
    		}
    		#parent{
    			font-size: 1.1em;
    		}
    		#child{
    			font-size: 2em;
    		}
    		#div2{
    			font-size: 2em;
    		}
    	</style>
    </head>
    <body>
    	<div id="parent">
    		parent
    		<div id="child">child</div>
    	</div>
    	<div id="div2">div2</div>
    </body>
    </html>

我们设置body的字体为100%，也就是默认字体16px  
parent的字体大小为1.1em，也就是默认字体的1.1倍大小

div2的字体大小为2em，也就是默认字体的2倍大小

对于child的字体大小，当然不是默认字体的2倍大小。因为em只是根据自己的父类调整，并不是祖先类。所以child的字体大小为父类的两倍，也就是2.2em。也就是默认字体的2.2倍大小。效果图如下：

![Center][]

由于em根据父类的特征，许多程序开发人员觉得很麻烦，所以就引入了rem。rem是始终相对于body。也就是写2rem，不管父类是多少，都是默认字体的两倍大小。

既然rem怎么好，按照道理em应该被淘汰了啊，可是为什么仍然存在呢？主要原因是因为曾经的ie7和ie8不支持rem。不过现在可以大胆的使用rem了，再也不用担心父类的字体大小是多少了。

其实当时为了解决ie不支持的问题，有大神也写过一些脚本，只是不愿意为了这么一点问题，让页面多加载一个脚本

[Center]: /images/20220612/d1d10a9e3b6d46e0bbeea66a9dd7a914.png

发表评论取消回复

表情：

评论列表（有 0 条评论，161人围观）

还没有评论，来说两句吧...

相关阅读

相关理解 px，em，rem 的区别和用法

px：px是固定的像素，他的大小不会因为屏幕的大小而进行改变的； em：相对长度，相对父元素的 font-size 的大小而做出改变的； rem：相对长度，rem 中的

红太狼/ 2022年12月23日 11:18/ 0 赞/ 159 阅读

相关 em和rem的理解

之前对于这个内容有点模糊，现在总结一下。 em是根据父类的大小调整，根据代码举例说明 <!DOCTYPE html> <html lang="en

落日映苍穹つ/ 2022年06月12日 04:43/ 0 赞/ 162 阅读

相关 css中em和rem的使用

你可能已经很熟练使用这两个灵活的单位，但你可能不完全了解何时使用 `rem` ，何时使用 `em`。本教程将帮你弄清楚! `em` 和 `rem`都是相对单位，由浏览器转换

短命女/ 2022年06月11日 00:43/ 0 赞/ 156 阅读

相关 px、em、rem

> px、em、rem都是用来描述字体大小的单位 px > px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 > 任意浏

Bertha 。/ 2022年06月01日 04:28/ 0 赞/ 235 阅读

相关 rem 单位和 em 单位

首先要知道：rem 和 em 是相对单位；我们通过代码来看 rem 和 em的使用和区别： em:相对于父级 <!doctype html>

灰太狼/ 2022年05月30日 10:45/ 0 赞/ 234 阅读

相关 em和rem

1.em和rem <style> .hah{ width: 10em; height: 10em;/e

缺乏、安全感/ 2022年01月29日 01:27/ 0 赞/ 268 阅读

相关 css单位em、px和rem

在对页面进行自适应时，查阅相关资料了解到，通常有两种方式将px转换为em或者rem，下面就上述三者之间的联系进行讲解： em与px转换一般浏览器默认1em=16px，

绝地灬酷狼/ 2022年01月05日 09:27/ 0 赞/ 264 阅读

相关 rem em px的区别

rem em px的区别 rem em px都是css中的相对长度单位 px 1px的值与屏幕分辨率有关例：当屏幕分辨率为72ppi时，此时1px=0.04

短命女/ 2021年11月29日 10:08/ 0 赞/ 286 阅读

相关 em和rem，rem适配手机屏幕

em和rem em:一种长度单位，参照当前元素的字号，如果没有设置，就参照父容器或者当前浏览器的默认字号。举个例子： <!DOCTYPE html>

分手后的思念是犯贱/ 2021年11月23日 01:38/ 0 赞/ 396 阅读

相关 css中rem和em的区别

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？ PX特点 1. IE无法调整那些使用px作为单位的字体大

「爱情、让人受尽委屈。」/ 2021年09月15日 16:38/ 0 赞/ 318 阅读