SPA 应用中如何应对不同设备的屏幕适配问题-JavaScript中文网-JavaScript教程资源分享门户

随着移动互联网的普及，越来越多的用户开始在手机、平板等移动设备上访问互联网，因此，在开发 SPA（Single Page Application，单页应用）应用时，如何应对不同设备的屏幕适配问题成为了一个不可忽视的挑战。

问题分析

在进行移动端屏幕适配时，一般分为以下两种方式：

固定布局：利用媒体查询（@media）设置不同屏幕宽度下的样式，缺点是需要针对每一个屏幕宽度进行样式的设置，工作量较大。
弹性布局：利用百分比和弹性盒子布局（flexbox）等方式，使布局能够随着屏幕宽度的变化而自适应，通常适用于宽度在 320px-768px 之间的移动端屏幕，但无法应对高度变化的问题。

解决方案

在 SPA 应用中，我们可以使用响应式布局的方式进行屏幕适配。

场景一：利用 rem 进行适配

在进行屏幕适配时，我们可以使用 rem（Root EM，根元素 em）单位来进行样式设置。rem 单位相对于根元素 html 的字号大小，特点是能够自适应页面缩放以及适应不同设备像素密度的问题。

首先，需要设置根元素 html 的字号大小。我们可以利用 JavaScript 获取文档宽度，计算出合适的字号大小，放到根元素 html 中：

var rootEle = document.documentElement;
var clientWidth = rootEle.clientWidth;
rootEle.style.fontSize = clientWidth / 7.5 + "px"; // 根据不同屏幕设置字号

在进行开发时，我们可以设定 1rem = 100px ，这样我们就可以通过计算单位转换来达到样式适配的目的。

例如，设置 body 元素的字号大小为 16px，则可以通过以下方式设置宽高及字号大小：

// javascriptcn.com 代码示例
body {
  font-size: 16px;
}

.box {
  width: 6rem; /* 相当于 600px */
  height: 3rem; /* 相当于 300px */
  font-size: 0.3rem; /* 相当于 30px */
}

使用 rem 来进行屏幕适配，能够自适应各种屏幕大小，但并不支持所有的浏览器，需要兼容处理。

场景二：利用 vw 进行适配

在不支持 rem 的浏览器中，我们可以使用 vw（Viewport Width，视窗宽度）单位来进行适配。vw 单位是指视口宽度的 1/100 ，与 rem 类似，能够自适应页面缩放以及适应不同设备像素密度的问题。

我们同样需要设置根元素 html 的字号大小为 1vw ，即 1vw = 1px 。对于不支持 viewport 的旧设备，我们可以使用媒体查询来解决：

// javascriptcn.com 代码示例
html {
  font-size: 1vw;
}

@media screen and (min-width: 320px) {
  html {
    font-size: 3.2px;
  }
}

@media screen and (min-width: 640px) {
  html {
    font-size: 6.4px;
  }
}

在进行开发时，我们同样需要设定一些基准值，例如：

.box {
  width: 50vw; /* 相当于占用视口宽度的一半 */
  height: 20vw; /* 相当于占用视口宽度的 1/5 */
  margin: 2vw; /* 相当于占用视口宽度的 2% */
}

使用 vw 来进行屏幕适配，能够自适应各种屏幕大小，支持更多的浏览器，但因为 vw 跟随视口大小的变化而变化，可能会带来部分兼容性问题。

最佳实践

以上两种方案在实际开发中都有适用的情况，因此我们可以根据实际需求进行选择。

最佳实践中，我们可以根据屏幕宽度选择适配方案，在移动端设备上使用 rem 进行适配，在 PC 设备上使用 vw 进行适配。

例如设置移动端字号大小：

var rootEle = document.documentElement;
var clientWidth = rootEle.clientWidth;
rootEle.style.fontSize = clientWidth / 7.5 + "px"; // 根据不同屏幕设置字号

设置 PC 端字号大小：

html {
  font-size: 10vw;
}

总结

在 SPA 应用中进行屏幕适配，是一个需要细心处理的问题。我们可以通过响应式布局的方式进行适配，利用 rem 和 vw 单位进行样式设置，从而达到自适应各类设备的目的。

需要注意的是，在进行开发时，我们需要使用百分比及弹性盒子布局等方法，以使布局可以随着屏幕宽度变化而自适应。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64fa984cf6b2d6eab317faa1