zoukankan      html  css  js  c++  java
  • vue-cli3创建项目实现px2rem

    1、安装

    npm install postcss-plugin-px2rem --save-dev
    

    2、引入配置

    // vue.config.js
    const px2rem = require("postcss-plugin-px2rem");
    
    module.exports = {
      css: {
        loaderOptions: {
          postcss: {
            plugins: [
              px2rem({ // postcss-plugin-px2rem 默认配置
                rootValue: 37.5, // 默认100
                unitPrecision: 5,
                propWhiteList: [],
                propBlackList: [],
                exclude: false,
                selectorBlackList: [],
                ignoreIdentifier: false,
                replace: true,
                mediaQuery: false,
                minPixelValue: 0
              })
            ]
          }
        }
      }
    };
    
    

    3、修改index.html

    // 原内容
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    // 修改为
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    

    4、看效果

    #app {
      text-align: center;
      font-size: 30px;
    }
    

  • 相关阅读:
    文件输入输出
    快速幂
    Vijos1512 SuperBrother打鼹鼠
    P2564 生日礼物
    P1886 滑动窗口
    P1540 机器翻译
    TYVj1939 玉蟾宫
    P1988 最大数
    二分图匹配
    [GDOI2017集训&做题记录&日记]
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/14720993.html
Copyright © 2011-2022 走看看