如何在vue项目中使用vw实现移动端适配（vue3移动端适配的解决方案）
前言
最近在给公司内部做一个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-flexiblepostcss-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:
Demo：
如果你的项目需要把pc端和wap端放一块写 ，可以参考参考这个demo 。
下载地址：vue3-page-adapter-pc-m创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！