rem、vw，还是其他？移动端适配方案见仁见智！

2023-10-22 10:21:02

2018年最后的法定假期已经结束了，我相信大部分正在进行或曾经进行过移动端页面开发的同学都或多或少的了解过使用rem进行移动端页面适配的方案以及使用vw的方案，（没了解过的同学可以参见大漠老师的这两篇文章《使用Flexible实现手淘H5页面的终端适配》和《再聊移动端页面的适配》）。

关于rem和vw的适配方案，业界也是众说纷纭，有的文章将rem捧上了天，有的文章则直接将vw贬低的一文不值。所以本文作为业界的一名普通的码农，不想参与到如此争论之中，本文将从一个相对中立的角度客观的比较一下rem和vw以及其他移动端适配方案的优缺点。

rem与vw适配方案的优缺点

rem单位，也叫根元素字体大小（Root EM），就是基于根元素（html元素）的字体大小来计算其他元素的大小，例如：font-size: 2rem，表示当前元素的字体大小是根元素字体大小的两倍。当需要进行移动端适配时，可以把根元素的字体大小设置为一个合适的数值，就可以让整个页面的字体大小都以这个数值为基准进行缩放，从而达到移动端适配的效果。

vw单位，也叫视口宽度百分比，是根据视口的宽度来计算其他元素的大小，例如：width: 50vw，表示当前元素的宽度是视口宽度的50%。当视口的大小改变时，当前元素的宽度也会随之改变，从而达到移动端适配的效果。

rem适配方案的优点：

跨浏览器兼容性好：rem单位最早是W3C提出的一种单位，目前大部分浏览器都支持rem单位。
相对单位：rem单位是一种相对单位，它会根据根元素的字体大小来计算其他元素的大小，因此当根元素的字体大小改变时，所有使用rem单位的元素的大小都会随之改变，这使得rem非常适合用于移动端适配。
灵活调整：rem单位的计算方式使得它可以非常灵活地调整元素的大小，这对于需要对不同设备进行适配的移动端网页来说非常重要。

rem适配方案的缺点：

无法跨设备适配：rem单位是基于根元素的字体大小来计算其他元素的大小，这意味着rem单位只能在同一设备上进行适配，如果在不同的设备上使用相同的rem单位，则会导致元素的大小不一致。
字体大小的限制：rem单位依赖于根元素的字体大小，因此当根元素的字体大小发生改变时，所有使用rem单位的元素的大小都会随之改变，这可能导致字体大小出现问题。
代码量较大：rem适配方案需要在每个使用rem单位的元素上都加上rem单位，这会增加代码量。

vw适配方案的优点：

跨设备适配：vw单位是根据视口的宽度来计算其他元素的大小，因此vw单位可以跨设备进行适配，只要视口的大小相同，则所有使用vw单位的元素的大小都会相同。
代码量较少：vw适配方案只需要在根元素上设置一个合适的视口宽度百分比，就可以让整个页面的元素都以这个百分比为基准进行缩放，这可以减少代码量。
兼容性好：vw单位是CSS3中新引入的单位，目前大部分浏览器都支持vw单位。

vw适配方案的缺点：

某些设备无法使用：vw单位是根据视口的宽度来计算其他元素的大小，如果某个设备的视口宽度无法获取，则无法使用vw单位进行适配。
无法对根元素进行适配：vw单位只能对根元素以外的元素进行适配，无法对根元素本身进行适配。
单位精度问题：vw单位是一个相对单位，它会根据视口的宽度来计算其他元素的大小，如果视口的宽度发生变化，则所有使用vw单位的元素的大小都会随之改变，这可能导致单位精度出现问题。

其他移动端适配方案

除了rem和vw之外，还有一些其他的移动端适配方案，例如：

百分比单位：百分比单位是相对单位，它会根据父元素的大小来计算其他元素的大小，例如：width: 50%，表示当前元素的宽度是父元素宽度的50%。
像素单位：像素单位是绝对单位，它表示元素的实际大小，例如：width: 320px，表示当前元素的宽度是320像素。
em单位：em单位也是相对单位，它会根据父元素的字体大小来计算其他元素的大小，例如：font-size: 2em，表示当前元素的字体大小是父元素字体大小的两倍。
ex单位：ex单位也是相对单位，它会根据父元素的x-height（x高度）来计算其他元素的大小，例如：font-size: 2ex，表示当前元素的字体大小是父元素x-height的两倍。
ch单位：ch单位也是相对单位，它会根据父元素的中文字符“0”的宽度来计算其他元素的大小，例如：font-size: 2ch，表示当前元素的字体大小是父元素中文字符“0”宽度的两倍。
vh单位：vh单位是视口高度百分比，它是根据视口的高度来计算其他元素的大小，例如：height: 50vh，表示当前元素的高度是视口高度的50%。
vmin单位：vmin单位是视口宽度和视口高度的最小值百分比，它是根据视口宽度和视口高度的最小值来计算其他元素的大小，例如：width: 50vmin，表示当前元素的宽度是视口宽度和视口高度的最小值的50%。
vmax单位：vmax单位是视口宽度和视口高度的最大值百分比，它是根据视口宽度和视口高度的最大值来计算其他元素的大小，例如：height: 50vmax，表示当前元素的高度是视口宽度和视口高度的最大值的50%。
calc()函数：calc()函数可以用来计算元素的大小，例如：width: calc(50% + 20px)，表示当前元素的宽度是父元素宽度的50%加上20像素。
clamp()函数：clamp()函数可以用来限制元素的大小，例如：width: clamp(320px, 50vw, 1000px)，表示当前元素的宽度最小为320像素，最大为1000像素，在320像素到1000像素之间根据视口宽度变化。
min()函数：min()函数可以用来获取两个或多个值中的最小值，例如：width: min(50vw, 320px)，表示当前元素的宽度为视口宽度的50%和320像素中的最小值。
max()函数：max()函数可以用来获取两个或多个值中的最大值，例如：height: max(50vh, 320px)，表示当前元素的高度为视口高度的50%和320像素中的最大值。