移动端适配：vw 和 rem 详解及实战案例

移动端适配：vw 和 rem 详解及实战案例

移动端适配是前端开发中常见的需求，而 vw 和 rem 是常用的单位，可以帮助我们实现页面元素的自适应。本文将以设计稿和实际项目为例，详细讲解使用 vw 和 rem 设置根字体大小的方法，并提供示例代码，帮助您理解并应用这些方法。

设计稿示例

假设设计稿宽度为 750px，设计稿中某个文字样式的大小为 30px。

实际项目示例

1. 使用 vw 设置根字体大小

html {
  font-size: 4vw; /* 4vw 表示根据视口宽度计算出的根字体大小 */
}

body {
  font-size: 1rem; /* 1rem 表示相对于根字体大小的单位 */
}

.text {
  font-size: 0.8rem; /* 相对于根字体大小的 0.8 倍 */
}

在上述示例中，根字体大小会根据视口宽度动态计算，假设视口宽度为 375px，则根字体大小为 (375px * 4) / 100 = 15px。所以，根据 rem 单位计算，.text 的字体大小为 15px * 0.8 = 12px。

2. 使用 rem 设置根字体大小

html {
  font-size: 16px; /* 设定根字体大小为 16px */
}

body {
  font-size: 1rem; /* 1rem 表示相对于根字体大小的单位 */
}

.text {
  font-size: 0.8rem; /* 相对于根字体大小的 0.8 倍 */
}

在上述示例中，根字体大小固定为 16px，所以，根据 rem 单位计算，.text 的字体大小为 16px * 0.8 = 12.8px（取整为 13px）。

总结

通过以上示例，可以看出，无论是使用 vw 还是 rem 来适配移动端，都可以根据根字体大小来计算其他元素的字体大小，以实现自适应的效果。

选择合适的方案取决于您的项目需求和设计稿的要求。

希望本文能够帮助您更好地理解和应用 vw 和 rem 来实现移动端适配。