H5开发全攻略：使用rem和vw实现响应式布局

前端

2024-01-12 17:15:59

用 REM 和 VW 征服响应式布局：打造无处不在的网页

响应式布局的意义

在当今设备繁多的时代，确保你的网页在任何屏幕尺寸上都完美呈现至关重要。响应式布局就是应对这一挑战的王牌。它让你的网页像变形金刚一样，能够根据设备尺寸自如切换形态。

REM 与 VW：响应式布局的神兵利器

REM（根元素测量单位）和 VW（视口宽度单位）是实现响应式布局的两个得力助手。

REM： 它与根元素（元素）的字体大小相挂钩，确保元素尺寸随着根元素的调整而等比例缩放。
VW： 它根据视口宽度计算元素尺寸，让元素随着屏幕宽度的变化而动态调整。

使用 REM 实现响应式布局

设置根元素大小： 为元素设置一个基础字体大小，如 16px。
使用 REM 单位： 将所有元素的字体大小、边距和内边距等属性值设为 REM 单位。
调整整体大小： 通过修改根元素的字体大小来调整网页的整体尺寸。

使用 VW 实现响应式布局

设置视口宽度： 将视口宽度设置为 100vw。
使用 VW 单位： 将所有元素的宽度、高度、边距和内边距等属性值设为 VW 单位。
调整整体大小： 通过修改视口宽度来调整网页的整体尺寸。

REM 与 VW 的对比

特性	REM	VW
相关性	根元素 ()	视口宽度
缩放比例	与根元素成正比	与视口宽度成正比
应用场景	文本、边距、内边距	宽度、高度、边距、内边距

代码示例

为了更直观地展示 REM 和 VW 的应用，这里有一个代码示例：

<html>
<head>
<style>
html {
  font-size: 16px;
}

body {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: #ccc;
}

.content {
  width: 80vw;
  margin: 1rem;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<h1>标题</h1>
<p>段落</p>
</div>
</div>
</body>
</html>