在如今多种设备尺寸各异的时代，网页设计需要适应各种不同大小的屏幕，才能提供良好的用户体验。响应式网页设计（Responsive Web Design）应运而生，它可以根据设备的屏幕尺寸自动调整网页布局和元素大小，以适应不同的屏幕大小。
为了实现响应式网页设计，我们需要使用合适的单位来表示网页元素的大小。而在这方面，REM和EM单位是两种常用且值得探讨的选择。
1. REM单位
REM（Root EM）是相对于根元素（即html标签）的字体大小而言的。换句话说，REM是相对于文档根元素的字体大小的单位。通过设置根元素的字体大小为一个相对较小的值，然后使用REM来表示其他元素的大小，可以实现相对于根元素比例的自适应效果。
html {
font-size: 16px;
}
p {
font-size: 1.5rem; /* 相当于html字体大小的1.5倍 */
}
使用REM单位的好处之一是，当用户调整浏览器字体大小时，网页元素会按比例调整，以保证整个页面的可读性和布局不会被破坏。另外，通过根据设备宽度动态设置根元素的字体大小，我们可以实现响应式网页设计的效果。
2. EM单位
EM（Equivocal/Emphasis/Element）单位是相对于元素自身字体大小的单位。换句话说，EM是相对于元素上层的字体大小的单位。当一个元素被设置了EM单位的大小时，它的大小将会相对于其父元素的字体大小进行计算。
div {
font-size: 16px;
}
em {
font-size: 1.5em; /* 相当于父元素字体大小的1.5倍 */
}
使用EM单位的好处之一是，我们可以灵活地控制元素的大小，因为它是相对于父元素的字体大小计算的。使用EM单位，我们可以创建基于嵌套关系的自适应网页布局。
3. 响应式设计与REM、EM单位的结合应用
在实际的响应式网页设计中，REM和EM单位经常会结合使用。通过使用REM单位表示根据根元素比例的自适应元素大小，再使用EM单位表示相对于父元素的自适应元素大小，我们可以更精确地控制网页元素的大小，以适应不同的设备尺寸。
举个例子，我们可以在根元素中设置字体大小为基准值，然后使用REM单位表示整个页面的基准比例。在页面的特定部分，我们可以使用EM单位来调整元素大小，而不会影响其他部分。
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 相当于根元素字体大小的2倍 */
}
section {
font-size: 1.2em; /* 相当于父元素字体大小的1.2倍 */
}
通过结合REM和EM单位的运用，我们可以更精确地控制网页元素的大小，以实现良好的响应式布局效果。
结论
响应式网页设计是适应不同设备的屏幕尺寸的重要手段，它可以提供一致的用户体验。使用合适的单位对网页元素大小进行表示是响应式设计的关键之一。REM和EM单位都是常用的且适合响应式设计的单位，它们的特点和使用方式在这篇博客中已经进行了介绍。通过合理地运用REM和EM单位，我们可以实现灵活自适应的响应式网页设计，以提供优秀的用户体验。
本文来自极简博客，作者：风吹麦浪，转载请注明原文链接：响应式网页设计：利用REM和EM单位（响应式设计&单位）
