从rem与vw看移动端适配方案实践及优缺点分析

前端

2023-10-29 01:23:55

在移动端设备普及的今天，响应式布局已经成为网站建设的必备技能。而移动端适配方案有很多种，其中rem和vw是两种常用的方法。本文将探讨这两种方案的优缺点，并提供实践经验和示例，帮助开发者做出更明智的选择。

一、rem简介

rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。它的相对是相对于HTML根元素来说的，假如我们设置HTML根元素的字体大小为10px，那么1rem就等于10px。

rem的优势在于：

跨浏览器兼容性好，主流浏览器都支持rem。
计算简单，只需要知道HTML根元素的字体大小，就可以计算出其他元素的尺寸。
响应性好，当HTML根元素的字体大小改变时，所有使用rem作为单位的元素的尺寸也会随之改变。

rem的劣势在于：

对于不支持rem的浏览器，需要使用媒体查询来兼容。
当HTML根元素的字体大小改变时，页面可能会出现短暂的闪烁。

二、vw简介

vw是CSS3新增的另一个相对单位（viewport width，视口宽度），这个单位是相对于视口宽度来说的。假如视口宽度为1000px，那么1vw就等于10px。

vw的优势在于：

响应性好，当视口宽度改变时，所有使用vw作为单位的元素的尺寸也会随之改变。
对于不支持vw的浏览器，不需要使用媒体查询来兼容。
不受HTML根元素字体大小的影响，因此不会出现闪烁的问题。

vw的劣势在于：

在不同设备上的表现可能会有所不同，因为视口宽度可能会有所不同。
计算相对复杂，需要考虑到视口宽度和设备像素比等因素。

三、rem与vw的对比

特性	rem	vw
相对性	HTML根元素字体大小	视口宽度
兼容性	主流浏览器都支持	需要使用媒体查询来兼容不支持vw的浏览器
响应性	当HTML根元素的字体大小改变时，所有使用rem作为单位的元素的尺寸也会随之改变。	当视口宽度改变时，所有使用vw作为单位的元素的尺寸也会随之改变。
闪烁问题	当HTML根元素的字体大小改变时，页面可能会出现短暂的闪烁。	不受HTML根元素字体大小的影响，因此不会出现闪烁的问题。
计算复杂度	简单	相对复杂
跨设备表现	可能会有所不同	可能会有所不同

四、实践经验和示例

在实际项目中，我使用rem作为移动端适配方案，并且取得了良好的效果。以下是我的实践经验和示例：

1. 设置HTML根元素的字体大小

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
  font-size: 62.5%;
}
</style>
</head>
<body>
...
</body>
</html>

2. 使用rem作为单位来设置元素的尺寸

<div class="container">
  <div class="header">
    <h1>标题</h1>
  </div>
  <div class="content">
    <p>内容</p>
  </div>
  <div class="footer">
    <p>页脚</p>
  </div>
</div>

.container {
  width: 100vw;
  height: 100vh;
}

.header {
  height: 10rem;
  background-color: #f0f0f0;
}

.content {
  flex: 1;
  padding: 2rem;
}

.footer {
  height: 10rem;
  background-color: #f0f0f0;
}