vue移动端适配之rem解决方案

世界和平��

已于 2022-06-20 11:27:49 修改

阅读量1.1k

点赞数

于 2022-05-30 16:16:10 首次发布

本文链接：https://blog.csdn.net/huangzhixin1996/article/details/125048576

版权

JavaScript 同时被 3 个专栏收录

21 篇文章 0 订阅

订阅专栏

Vue

20 篇文章 0 订阅

订阅专栏

Typescript

10 篇文章 0 订阅

订阅专栏

关于自适应与响应式：

首先得有一个概念性的区分，因为我们有时候常常会把以上两者搞混。

所谓响应式则是页面的内容会根据我们的屏幕分辨率去做一个动态的变换，通常它是具有一个实时同步性的，当页面分辨率发生变化后，页面便会随之做一个我们写好的定式变化，一般情况下我们是用media媒体查询去解决这样的一个问题。这样的方案一般适用于我们的PC端项目。

至于自适应，通常情况下是作为移动端的一种适配方案，因为我们的每一部不同的手机基本上都有不同的分辨率，但是它们的分辨率通常不会有很大的一个差距变化，所以我们可以用到自适应这样一种方案，去让我们的页面在每个不同的手机上的显示达到一致。自适应引起的变化基本上都不会对页面做很大的更改，大多数时候只是让我们的页面比例在不同手机上保持一致。

关于这篇博客暂时只讨论关于自适应的两种不同方案，它们都是通过使用rem这个单位属性去达到我们的目的。

认识rem

什么是rem，如果没用过这个像素单位的人可能会一脸懵逼，其实关于它在html中的作用其实可以很简单地表达，rem这个单位就是以我们的根元素root，就是我们的html标签的文字font-size的单位为基准，1rem即等于我们根元素标签中设置的font-size。

既然清楚了rem的代表含义，那么我们就可以设置一个基准大小，然后页面上的所有尺寸单位都可以使用rem来代替，全局就能够保持在一个同样比例，同样尺寸范围的约束中。一旦rem的基准发生变化全局中使用rem作为单位的div都会随之发生变化。

到这里其实已经很清楚地能够了解到，一旦我们所有的元素尺寸单位都被统一控制，那么页面内容也就能随比例一起发生变化，这里就诞生了一个最简单的方法去生成一个自适应方案。

一、利用vw，vh完成自适应

vw，vh单位代表的是打开页面所使用设备的分辨率单位。比如我们的手机屏幕可视宽度为100vw，高度为100vh，所以1vw和1vh就分别代表为他们的百分之1。

这样子的话我们便在根元素中定义一个文字大小为vw作单位的一个font-size值，最后它自然而然地就会根据我们的屏幕分辨率发生对应的变化。通常情况下这种方案完全是可用的，只是适配性并不会很强，不能达到最理想的一个自适应的变化。它也只能用在手机上去做适应，因为手机页面相对会比较简单一些，而且手机的分辨率不会差距过大。

比如我们的设计稿是750px的话，我们可以在html标签中设置一个font-size值为2vw，那么我们1rem单位就代表这750/100*2=15px，这只是一个打比方，正常情况下最好根据设计图给出的分辨率去设置1rem为100px的情况下是最适合开发的方案，比较方便去计算这些单位。

二、利用工具去处理，把全局的px转化为rem

其实原理跟以上的方案并没有什么特别大的差别，都是使用rem作为单位去处理这样的一个事情。主要还是在根元素的文字大小font-size上做了一点点不同的操作。

一、环境

vue-cli3.0
vue2.x

二、安装postcss-px2rem-exclude: (将px自动转为rem)


yarn add postcss-px2rem-exclude

在根目录的postcss.config.js添加如下代码：（如果没有则自己新建一个）

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px2rem-exclude": {
      remUnit: 75,                            // 设计图的十分之一宽度，我这里是750px的设计图，所以设置为75
      exclude: /node_modules|folder_name/i    // 忽略node_modules内的第三方ui库，防止样式出现问题
    }
  }
};

在主入口index.html添加如下代码：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /> 

  <script>
    // 添加屏幕调整监听事件,设置1rem=屏幕分辨率的1/10
    (function() {
      function autoRootFontSize() {
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
      }
      window.addEventListener('resize', autoRootFontSize);
      autoRootFontSize();
    })();
  </script>
</head>