updata article: rem layout

programmer-zhang · programmer-zhang · commit 8da41db1ee1d · 2024-02-10T19:37:04.000+08:00
diff --git a/profiles/HTML_adaptive-layout.md b/profiles/HTML_adaptive-layout.md
@@ -68,4 +68,21 @@
 }
 ```
 
-##### `rem` 响应式布局
+* 媒体查询布局通常用于响应式网页设计种，可以根据设备的特征和用户的行为动态地调整页面布局和样式，提供更好的用户体验。
+
+##### `rem` 响应式布局
+
+> REM（Root EM）布局是相对于根元素（html）的字体大小进行计算的布局方式。通过设置根元素的字体大小，我们可以方便地控制整个页面中各个元素的尺寸，从而实现响应式布局。
+
+```
+html {
+    font-size: 16px; /* 设置根元素字体大小为16px */
+}
+
+/* 使用REM单位设置元素的尺寸 */
+.box {
+    width: 10rem; /* 宽度为10倍的根元素字体大小，即160px */
+    height: 5rem; /* 高度为5倍的根元素字体大小，即80px */
+    background-color: blue;
+}
+```
