vue自动将px转换成rem

1.安装lib-flexible

npm i lib-flexible --save

2.引入flexible

在项目入口文件main.js中添加如下代码，引入flexible

import 'lib-flexible'

3.安装px2rem-loader(将px转换成rem)

npm install px2rem-loader --save-dev

4.配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize:process.env.NODE_ENV ==='production',
      sourceMap: options.sourceMap,
      importLoaders:2
    }
  }
  const px2remLoader = {
    loader: "px2rem-loader",
    options: {
    remUnit: 75
    }
  }

5.去除index.html中mate标签(一定要注销) 配置适配各种机型

<head>
    <meta charset="utf-8">
    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
    <script src="https://webapi.amap.com/maps?v=1.4.10&key=8938d3ffbae4c2810ea60b8de046365b"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="HandheldFriendly" content="true">
    <meta name="MobileOptimized" content="320">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="browsermode" content="application">
    <meta name="x5-page-mode" content="app">
    <meta name="msapplication-tap-highlight" content="no">
    <title>wisdom-app</title>
  </head>

6.找到node_modules库（可要可不要）

找到flexible.js(适配ipad)

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        // if (width / dpr > 540) {
        //     width = width * dpr;
        //     alert(1)
        // }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

沫熙瑾年

发布了109 篇原创文章 · 获赞 23 · 访问量 10万+

私信关注

vue自动将px转换成rem

猜你喜欢