vue自动将px转换成rem

1.安装lib-flexiblenpm i lib-flexible --save2.引入flexible在项目入口文件main.js中添加如下代码，引入flexibleimport 'lib-flexible'3.安装px2rem-loader(将px转换成rem)npm install px2rem-loader --save-dev4.配置px2rem-l...

沫熙瑾年

2658人浏览 · 2018-10-17 10:43:54

沫熙瑾年 · 2018-10-17 10:43:54 发布

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;
    }

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^