什么是rem单位？
rem是指相对于根元素（即html元素）的字体大小的单位，这意味着可以为网站设计创建一个范围，而不受特定设备或屏幕大小的限制。因此，rem单位对于现代响应式布局来说是必不可少的。
用rem布局的优势
使用rem单位作为页面的基本元素，可以使布局在轻松适应不同设备的大小和分辨率的情况下，更加灵活和便捷。与流行的其他布局单位相比，如px或em，rem具有以下优势：
1.可伸缩性 - rem单位不仅可以增加其它css属性，还可以根据根元素字体大小而相应地缩放，使得设计的网页在不同的显示设备上得到唯一的体验。
2.易于维护 – 使用rem单位可以更容易地管理不同的布局和样式，因为它们基于相同的根元素。
如何运用rem布局
下面是使用rem布局进行响应式设计的一些简单指南：
1.在文档头部设置基础字体大小，以rem作为单位（1rem等于根元素html字体大小）。
2.使用rem单位来设置所有的字体大小、边距、高度、宽度等css属性。
3.将根据比例进行子元素设置基于根元素的字体大小。
4.在每个媒体查询中更改根元素的字体大小，以便布局根据不同设备而变化。
rem布局的示例
下面是一个使用rem单位进行设计的例子：
```css
html {
font-size: 62.5%; /* 1rem = 10px */
}
body {
font-size: 1.6rem; /* 16px */
line-height: 1.5;
margin: 0;
padding: 0;
}
h1 {
font-size: 2.4rem; /* 24px */
margin-bottom: 1.6rem; /* 16px */
}
p {
font-size: 1.8rem; /* 18px */
margin-bottom: 1.2rem; /* 12px */
}
@media screen and (max-width: 768px) {
html {
font-size: 50%; /* 1rem = 8px */
}
h1 {
font-size: 2rem; /* 16px */
margin-bottom: 1.2rem; /* 12px */
}
p {
font-size: 1.6rem; /* 12px */
margin-bottom: 1rem; /* 10px */
}
}
```
在这个示例中，我们将根元素的字体大小设置为10px，然后定义各种css属性，并使用基于1rem单位的字体大小、边距和间隙作为其值。这种设计方法使用rem单位创造了一个相对而不是绝对的布局空间，该空间适应了任何大小的屏幕，因此是一个很好的响应式布局的例子。
rem单位是现代布局中非常重要的一个单位，允许网站设计人员为不同大小和分辨率的设备创建可伸缩、灵活和便捷的布局。将基本的CSS属性设置为rem单位，并使用媒体查询进行调整，可以帮助设计师们在不同的设备上创建响应式布局。虽然需要一些时间来了解并掌握rem单位的使用方法，但这种将可伸缩性和易维护性结合在一起的布局方式可以极大地提高网站的用户体验和性能。
