vue3移动端适配的解决方案

最新推荐文章于 2025-04-25 08:55:51 发布

爱唱歌的前端

最新推荐文章于 2025-04-25 08:55:51 发布

阅读量1.3w

点赞数 21

分类专栏： Vue框架文章标签： javascript vue.js 前端 amfe-flexible postcss-pxtorem

本文链接：https://blog.youkuaiyun.com/weixin_42063951/article/details/127734001

版权

Vue框架专栏收录该内容

15 篇文章

订阅专栏

文章目录

前言
一、使用插件
二、老方案
- 效果：
- Demo：

前言

最近在给公司内部做一个BBS论坛，需要在电脑和手机上都可以操作，所以需要做移动端的适配，下面是我在开发后觉得不错的一些解决方案，分享给大家。

一、使用插件

在vue2的时候我们可以使用lib-flexible + postcss-pxtorem 去对移动端进行适配，不过lib-flexible这个过度方案弃用了，所以我们可以在vue3中用amfe-flexible + postcss-pxtorem，vant也推荐用这两搭配，老实说，vant是真的香(づ￣3￣)づ。

vant 推荐使用在=》进阶用法=》Rem 布局适配：传送门

下面来看一下这两插件怎么用吧，我们先执行命令安装这两插件（测试用的vue版本是3.2.13）

amfe-flexible：目前执行默认指向2.2.1版本

npm i -S amfe-flexible

postcss-pxtorem 目前执行默认指向6.0.0版本

npm install postcss-pxtorem --save-dev

安装完后我们先在main.js中引入amfe-flexible

import 'amfe-flexible'

接着在项目根目录新建一个postcss.config.js文件

Vue3脚手架项目
	|-public
	|-src
	|-postcss.config.js

① 纯wap项目

如果你的项目不考虑放PC端的页面的话，直接把下面的代码拷贝到上面创建的js文件里就好了：

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75; // 因为vant框架是以375px的稿子为基础的，所以需要适配一下
            },
            propList: ['*'], // 需要转换的css属性，默认*全部
        }
    }
}

配置完之后我们就可以在项目中以px为单位去开发了，是的，不用我们手动敲rem转换去开发了，PS设计稿的宽度以750px为基准，否则需要自己调一下，开发时稿子是1px，你就写1px就好了，插件会帮我们换算成rem。

效果：

我用vant4简单搭了个项目，从GIF中可以看到px都自动转化成rem了，vue的logo我给了375px的宽高，当窗口宽度为750像素时，logo的实际宽高是375px，也就是说我们只要按750的设计稿去写，就能以1:1进行页面还原了。

在这里插入图片描述

Demo：

如果你的项目完全不用考虑pc端的话，可以参考参考这个demo。
下载地址：vue3-page-adapter-m

② pc&wap混合项目（我放弃了）

如果你的项目既要放手机端的页面，又要放电脑端的页面，那么我是不推荐你用amfe-flexible + postcss-pxtorem去适配你的项目的，至于为什么，可以看看下面我踩的坑。

本地工作目录：

Vue3脚手架项目
	|-src
		|-views
			|-m
			|-pc

比如说你的工作目录有两个文件夹，一个用来放手机端的页面，一个用来放电脑端的页面，那么我们肯定是不想pc文件夹里的页面被转换成rem，也不想pc端的ui框架（element plus）被转换成rem，那么postcss-pxtorem提供了下面4中形式来处理是否需要把pc转化成rem：

rootValue({ file })：转换比率
propList[]：需要转换的css属性，默认*全部，比如不想字体被转换，那就在数组里面加入'!font-size'
selectorBlackList[]：不需要转换的class类名
exclude：不需要转换的文件夹，可以使用三种形式：字符串（String）、正则表达式（Regexp）、函数（Function）

首先为了不让pc文件夹下面的页面自动转化成rem，我配置了exclude参数来区分，之后pc文件夹下的vue文件的样式确实不会自动转换了，但是引入element plus后，拖动窗口你会发现el组件自动缩放了，是的，就算你在配置好的pc文件夹里使用去第三方框架，第三方框架还是会自动转化成rem，于是我配置了selectorBlackList，于是我把有关el和:root的类名全部设置成不自动转换，之后el组件确实不会自动缩放了，但是这样的话手机端的vant组件不会自动缩放了，除非手动去设置像素大小，这是因为第三方框架的一些基础属性都是放在:root下，具体看下面的GIF:

至于为什么要设置:root类名，因为el组件的默认值都在这个类名下，不排除的话一些字体会转化成rem，导致字体自动缩放；另外你可能还会问el组件的默认值都是--el开头的属性，为什么不用propList去排除？我试过，不行）

在这里插入图片描述

相关代码：

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue({ file }) {
                return file.indexOf('vant') !== -1 ? 37.5 : 75; // 因为vant框架是以375px的稿子为基础的，所以需要适配一下
            },
            propList: ['*'], // 需要转换的css属性，默认*全部
            selectorBlackList: ['el',':root'], // 不需要转换的class类名
            exclude: 'src\\views\\pc' // 不需要转换的文件夹
            // exclude: /src\\views\\pc/i
            // exclude: function (file) { return file.indexOf('src\\views\\pc') !== -1; }
        }
    }
}

接着我又尝试在rootValue里有关element-plus组件的都返回false，结果vant框架能缩放了，element框架能不自动缩放了，但是:root类名里的--el的一些默认值都被替换成了Infinityrem，所以el的一些字体、高度、圆角等默认值都不会有了，(╯°Д°)╯︵┻━┻，我选择狗带了。

在这里插入图片描述

相关代码：

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-pxtorem': {
            rootValue({ file }) {
                if (file.indexOf('element-plus') !== -1) return false
                return file.indexOf('vant') !== -1 ? 37.5 : 75; // 因为vant框架是以375px的稿子为基础的，所以需要适配一下
            },
            propList: ['*'], // 需要转换的css属性，默认*全部
            selectorBlackList: ['el'], // 不需要转换的class类名
            exclude: 'src\\views\\pc' // 不需要转换的文件夹
            // exclude: /src\\views\\pc/i
            // exclude: function (file) { return file.indexOf('src\\views\\pc') !== -1; }
        }
    }
}

经过一顿操作后，还是没有办法很好的用amfe-flexible + postcss-pxtorem去兼顾pc+wap的项目，并且考虑后续pc端不可能只用element框架，所以我放弃这种方案了

二、老方案

最后，为了项目里能同时兼顾pc端和wap端，我还是选择用了以前写原生时的方案，不清楚的可以看看我之前写的文章：传送门，下面来看一下可行性吧。

Vue3脚手架项目
	|-public
		|-index.html

我们先在index.html文件的<head>标签里加入下面的代码：

  <script>
    const isMobile = () => {
      const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag ? true : false;
    }
    if (isMobile()) {
      //封装响应式像素方法,初始化单位，实现手机端1rem=100px
      const responsivePX = () => {
        //获取页面的宽度
        let deviceWidth = document.documentElement.clientWidth;
        //如果页面大于750，即px端的页面，则把html的像素锁死在100px
        if (deviceWidth > 750) deviceWidth = 750;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
      }
      // 第一次初始化像素大小
      responsivePX();
      // 监听窗口二次刷新像素大小
      window.onresize = () => {
        responsivePX();
      };
    }
  </script>

这段代码的大致功能是监听到设备是移动端时，就会根据窗口的大小去动态设置html的字体大小，之后我们就可以在项目中以rem为单位去开发移动端了，为了防止字体过大，我做了限制，就是当屏幕大于750时，最大字体仍旧是100px，当屏幕刚好等于750时，rem和px的比例为1:100，也就是说用750像素的设计稿去开发，比如页面宽度是100px，那么我们代码里写1rem就行了，相信都能看懂，不多说了。

效果：

用老方案的话完全不用担心pc端会自动缩放了，因为在pc环境我们压根就没动态设置html根标签的字体，唯一比较麻烦的是写移动端页面时要换算成rem，还有就是因为不会自动把px转化成rem，所以第三方框架并不会自动缩放，比如vant的组件，它是有默认的px值的，如果你想要某个组件自动缩放的话，手动设置一下rem就好，其实一些组件不设置缩放我反而会觉得看得更舒服，比如tabbar，这个因人而异吧，问题不大。需要注意的是如果你用了vant的tabbar，会有一部分视野挡住内容，需要根据你设置的高度或默认的高度去设置下padding，具体可以看下GIF:

在这里插入图片描述