vue cli3适配所有端方案的实现

(编辑：jimmy 日期: 2024/11/16 浏览：2)

应用场景

页面需要在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">

自此，项目就配置完了。

        
            上一篇：JS实现表单中点击小眼睛显示隐藏密码框中的密码
            下一篇：RxJS在TypeScript中的简单使用详解