vue cli3适配所有端方案的实现
网络编程 发布日期：2025/11/3 浏览次数：1
正在浏览：vue cli3适配所有端方案的实现
应用场景
页面需要在pc端和移动端同时兼容，以前我的方案都是使用媒体查询来判断当前设备大小，然后写两套或者三套css代码来兼容他们，能达到目的，并且效果不错，但是感觉还是稍微麻烦了一丢丢。后面了解了一下flexable.js脚本，稍作修改，基本可以满足我的需求。
postcss-px2rem
yarn add postcss-px2rem
postcss-px2rem插件可以将px转为rem,需要在vue.config.js(项目没有的话就手动创建一个)中配置插件
// css相关配置
css: {
// 启用 CSS modules
modules: false,
// 是否使用css分离插件
extract: true,
// 开启 CSS source maps"color: #ff0000">flexible.js
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值 ===>设备缩放比
所以，在我们的html的header中，就不要之前配置的viewport的meta标签了
<meta name="viewport"
content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
这种标签flexble会自动帮我们加上。
下面附上修改完后的flexble脚本代码：
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
var isMobileDevice = /(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent);
dpr = isMobileDevice "text-align: center">
最后在head添加js标签，引入它：
<script src="/UploadFiles/2021-04-02/flexible.js">
自此，项目就配置完了。