当前位置:首页 >> 网络编程

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">vue cli3适配所有端方案的实现

最后在head添加js标签,引入它:

<script src="/UploadFiles/2021-04-02/flexible.js">

自此,项目就配置完了。