zoukankan      html  css  js  c++  java
  • vue配置px转rem

    1.下载lib-flexible

    npm i lib-flexible --save

    2.在index.html中

    <html data-dpr = '1'>
    在common.css中写  
    html {
    font-size: 10vw;
    }

    3.设置meta标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    4.安装px2rem-loader

    npm install px2rem-loader

    5.配置px2rem-loader

    在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:

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

    同时,在generateLoaders方法中添加px2remLoader

    function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
    loaders.push({
    loader: loader + '-loader',
    options: Object.assign({}, loaderOptions, {
    sourceMap: options.sourceMap
    })
    })
    }

    6.重启,一切ok~

    npm run dev
  • 相关阅读:
    用户交互语句
    基础数据类型补充与总结
    Python 中表示 False 的方法
    集合
    字典
    元组
    列表
    整型数据详述和进制转换
    f-strings 详解
    字符串方法详解
  • 原文地址:https://www.cnblogs.com/miaSlady/p/9952642.html
Copyright © 2011-2022 走看看