总之，使用EM、REM等相对长度单位进行页面布局是WEB开发中的最佳实践。最好在页面布局中应用EM和REM，并根据设备大小缩放显示元素的大小。这使得组件在不同设备上达到最佳显示效果成为可能。但问题是用EM还是REM？在这个问题上一直存在很大的争议。本文将向大家介绍什么是EM和REM以及如何选择它们，以及如何结合两者的优点来构建模块化的WEB组件。注：本文内容简单，仅面向初级开发者，2500字左右，阅读时间5分钟。1什么是EM？em是相对长度单位。它是相对于当前元素的字体大小，即font-size。比如当前元素的字体是20px，那么当前元素中的1em就等于20px。h1{font-size:20px}/*1em=20px*/p{font-size:16px}/*1em=16px*/在实际开发中，使用相对长度单位（如em）来表示字体大小是WEB开发最佳实践。考虑以下代码：h1{font-size:2em}这里h1元素的字体大小是多少？这时候我们就需要根据

父元素的字体大小来计算

的字体大小。如果父元素是，的字体大小是16px。可以算出

的字体大小为32px，即2*16px。用代码表示如下：html{font-size:16px}h1{font-size:2em}/*16px*2=32px*/设置的字体大小一般不是一个好主意，因为它会覆盖默认值用户浏览器的设置。相反，使用百分比值或声明根本没有字体大小。html{font-size:100%}/*Default16px*/对于大多数用户或浏览器，默认字体大小为16px（没有浏览器默认字体大小设置）。em还可以用来指定字体大小以外的其他属性，例如margin或padding等属性都可以用em来表示。考虑以下代码，

和

元素的margin-bottom值应该是多少？（假设字体大小设置为100%）。h1{字体大小：2em;/*1em=16px*/margin-bottom:1em;/*1em=32px*/}p{font-size:1em;/*1em=16px*/margin-bottom:1em;/*1em=16px*/}上面的

和

的margin-bottom都是1em，但是外边距的结果值不同。出现上述现象是因为em是相对于当前元素的字体大小的。由于现在

中的字体大小设置为2em，所以

中其他属性的1em值为1em=32px。这里是容易引起误解的地方。2什么是快速眼动？rem代表rootem，是相对于根元素的长度单位。这里的根元素是中定义的字体大小。这意味着任何地方的1rem总是等于中定义的字体大小。使用上面相同的代码，我们将em替换为rem，看看margin-bottom的计算值是多少？h1{字体大小：2rem;底部边距：1rem；/*1rem=16px*/}p{字体大小：1rem;底部边距：1rem；/*1rem=16px*/}如上面代码所示，1rem始终等于16px（除非字体大小发生变化）。rem的大小比em更直接、更清晰，容易理解。3REM还是EM？在项目开发中选择rem还是em一直存在争议。一些开发人员不使用rem，因为rem使组件的模块化程度降低。而其他开发人员喜欢REM的简单性，并为所有元素使用REM。其实em和rem都各有优缺点。在实际项目开发中，应该将它们结合使用，发挥各自的优势，以达到更好的代码质量和展示效果。那么在具体应用中两者如何取舍呢？有两个简单的准则：如果属性大小要根据元素字体缩放，则在所有其他情况下使用em。上面的规则太简单了。为了更好的理解上述规则，我们将以一个简单的header组件为例，来说明单独使用两者实现组件时遇到的问题，并体验两者结合使用的优势。3.1只使用REM这里我们只使用rem来写一个header组件。代码及运行结果如下：.header{font-size:1rem;填充：0.5rem0.75rem；background:#7F7CFF;}接下来，网站需要一个尺寸更大的header组件。更改CSS代码如下：.header{font-size:1rem;填充：0.5rem0.75rem；background:#7F7CFF;}.header-large{font-size:2rem;}运行结果如下：从上面的运行结果可以看出，文字的padding太小了，显示效果不怎么样协调的。如果我们坚持只使用rem，那么我们只能将css代码改成如下：.header{font-size:1rem;填充：0.5rem0.75rem；背景：#7F7CFF;}.header-large{字体大小：2rem;padding:1rem1.5rem;}更改后的运行结果如下：以上代码和运行结果虽然达到了预期的展示效果，但是违反了代码复用的原则。如果网站有多种尺寸的.header样式，需要重复定义padding。重复的代码增加了项目的复杂性并降低了可维护性。这时候可以用em把上面的代码改成这样：.header{font-size:1rem;填充：0.5em0.75em；background:#7F7CFF;}.header-large{font-size:2rem;}运行结果请查看demo程序：Demo代码如上demo程序所示，当需要缩放元素属性值的大小时根据元素的字体大小，应该使用em来定义属性大小。这是前面规则中的第一个。3.2只使用EM如果上面的组件只使用em定义会怎样？我们将上面的代码改成如下（em替换rem）：.header{font-size:1em;填充：0.5em0.75em；background:#7F7CFF;}.header-large{font-size:2em;}更接近实际，我们引入了

元素，并将html代码改成如下：Celebrityquotes