2021年，前端适配最简单最好的解决方案是什么？

我来尝试着回答，因为这两种方案都可以说是我们先后推出的不同适配方案。

首先要说的，不管是 REM 适配方案还是 VW 适配方案，他们最初的初衷都是针对于移动端的适配方案，而且是适配移动手机端，还不包括像iPad这样的手持设备。

先看 REM 适配方案，在那个年代，设计稿也随着苹果设备出现，做出调整：

简单地说，从640px 换成了 750px。那个时候，我们就知道 vw 单位在移动端，特别是手机端是一个较好的单位，100vw 就相当于设计稿的尺寸，即 750px。但由于 vw 在2014年和2015年时候还未得到浏览器支持，也基于这个原因， @winter 大大采用了 rem 单位，并且模拟出 vw 的原理。为此给移动端有一个很好的适配方案。说实话，在那个时候这种方案简直就是金弹呀（不仅是银弹）。

有关于 REM 适配方案，曾写过一篇相关的文章，感兴趣的话可以阅读一下下：

随着后面 vw 得到更多浏览器支持之后，也就大约是 2017年，我就尝试着使用 vw 来替换 rem 方案，并且在2018年得到更多团队的认可，而且社区使用这种方案或类似方案的团队越来越多，就成了一种主流方案。

但 VW 有一个最致命的问题，他除了在手机端上有较好的浏览效果之外，其他宽屏设备会占满全屏幕，浏览起来就觉得很大，而且 vw 还不能像 rem 那种方案，让其在 PC 端（宽屏）之下水平居中。

今年随着 CSS 函数中的比较函数 的到来，特别是 clamp() 函数到来之后，可以利用该函数特性，做了个更好的选择，比如给clamp()函数提供一个最小值，最佳值和最大值：

就拿字号来说，你可以：

body { font-size: clamp(16px, 5vw, 50px) }

这也很像 CSS 锁理念 ：

相当于给了一个区间值。

最近，我自己也借助了这种理念，根据设计稿尺寸，用户当前视窗宽度，加上最小视窗宽度和最大视窗宽度，构建一个像素级完美缩放的布局方案。这种方案有一个简单的计算公式：

像素缩放值（采用像素单位值）= 设计稿理想尺寸像素值  x  当前视窗宽度（100vw） / 设计稿尺寸（理想设计稿宽度）

打个比方，设计稿的宽度是 750px，某个元素的字号在设计稿上 24px ，那么：

font-size: calc(24 * 100vw / 750)

如果把区间值整进来：

font-size: calc(24 * clamp(320px, 100vw, 1440px) / 750)

可以借助 CSS 自定义属性，让它变得更简单一点：

:root { 
  --ideal-viewport-width: 750; 
  --current-viewport-width: 100vw; 
  --min-viewport-width: 320px; 
  --max-viewport-width: 1440px; 
  --clamped-viewport-width: clamp( 
    var(--min-viewport-width), 
    var(--current-viewport-width),