vue-h5适配两种方案

最新推荐文章于 2024-08-27 12:05:51 发布

lxslxskxs

最新推荐文章于 2024-08-27 12:05:51 发布

阅读量1.6k

点赞数 1

分类专栏：笔记 vue 文章标签： nodejs javascript vue.js

本文链接：https://blog.csdn.net/lxs19930928/article/details/121639532

版权

笔记同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

vue

27 篇文章 4 订阅

订阅专栏

1：第一种方案

下载插件

yarn add postcss-px2rem@5 -D
yarn add amfe-flexible -D

新建postcssrc.js

postcssrc.js

module.exports = {
  plugins: {
    // 'postcss-import': {},
    // 'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {},
    'postcss-px2rem': {
      // rootValue: 422.4,//对应设计图宽度4224*1296
      // rootValue: 192,//对应设计图宽度1920*1080
      rootValue: 75, // 对应设计图的750*667 1rem = 75px
      propList: ['*', '!border*'] //  表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框，这样不会把边框1px变成1rem
    }
  }
}

main.js中引入

 // 在入口main.js中 引入 lib-flexible
import "amfe-flexible/index.js";

在package.json文件下配置浏览器兼容的方案

  "browserslist": [
    "> 1%",
    "last 3 versions",
    "not ie <= 8",
    "chrome >= 14",
    "safari >= 3",
    "ios >= 7",
    "android >= 4.0"
  ]

或者在.browserslistrc中配置(推荐)

> 1%
last 3 versions
not ie <= 8
chrome >= 14
safari >= 3
ios >= 7
android >= 4.0

效果图如下

2：第二种方案,直接引入rem.js

在utils文件夹下，新建rem.js

 (function(doc, win) {
    var docEl = doc.documentElement,
      isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
      dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
      dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
      dpr = 1,
      scale = 1 / dpr,
      resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    docEl.dataset.dpr = dpr;
    var metaEl = doc.createElement('meta');
    metaEl.name = 'viewport';
    metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
    docEl.firstElementChild.appendChild(metaEl);
    var recalc = function() {
      var width = docEl.clientWidth;
      if (width / dpr > 750) {
          width = 750 * dpr;
      }
      // 乘以100，px : rem = 100 : 1
      docEl.style.fontSize = 100 * (width / 750) + 'px';
    };
    recalc()
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
})(document, window);