使用rem实现宽度自适应

rem 单位是相对于根字体大小的。

元素大小跟随窗口宽度大小自适应，关键是根字体大小随窗口宽度变化而变化。主要用于移动端的 H5。

但是有个问题是如果自适应大小的 H5 页面在宽屏的 PC 端打开，就会让元素变得非常大，从而导致布局全乱了，无法正常查看。

我们可以设置一个最大窗口宽度，当窗口宽度大于这个宽度时，根字体大小就不再变化，然后应用在这个最大的宽度内渲染，可以让其左右居中，两边留白。实现在 PC 宽屏下展示窄屏 H5 的浏览效果。

浏览器默认字体大小是 16px，一般移动端，我们的设计稿尺寸是按照屏幕宽度为 375px 来设计的。所以我们先定个基准：当窗口宽度为 375px 时，根字体大小为 16px。

计算动态根字体大小

根据上述基准，我们可以得出：

根字体大小 = 窗口宽度 * 16px / 375px

即

:root {
  font-size: calc(100vw * 16 / 375);
}

设置最大窗口宽度

假设，我们设置最大窗口宽度为 768px，即当窗口宽度大于 768px 时，根字体大小将不再变化

@media screen and (min-width: 768px) {
  :root {
    /* calc(768px * 16 / 375) */
    font-size: 32.768px;
  }
}

设置内容水平居中显示

设置内容在所规定的最大宽度内水平居中显示

body {
  max-width: 768px;
  margin: 0 auto;
}

设置定位元素的基准

当我们的内容在 PC 宽屏下，水平居中显示，两边保留空白的情况下，如果有一个固定定位的弹窗，样式为

.modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

这样的话，就会导致弹窗的宽度是相对于整个窗口的宽度，而不是我们水平居中显示的内容宽度，这是不合适的。

根据 MDN 文档中固定定位 fixed 的描述：

当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

所以我么可以设置 body 的样式为：

body {
  perspective: 0;
}

使 body 内的所有元素，固定定位的基准为 body 的大小位置，而不是整个窗口。

总结

这种方案在竖屏 (宽度大于高度) 状态下，保持了显示效果以及布局的统一。

但是在横屏 (宽度小于高度) 状态下，例如 PC 端，就会导致内容在水平居中显示，两边留有大片空白。看起来不是那么美观。

这种主要适用于，只做移动 H5 端的页面，PC 端不做处理。

如果还有 PC 端的设计稿，可以用 CSS 的媒体查询，来做宽度自适应。

或者完全新开一个项目专门做 PC 端页面，然后访问的时候，监听浏览器 ua 或者窗口宽度，自动跳转到对应的移动端或 PC 端的项目页面。