zoukankan      html  css  js  c++  java
  • Vue使用lib-flexible,将px转化为rem

    1.下载lib-flexible

    我使用的是vue-cli+webpack,所以是通过npm来安装的

    npm i lib-flexible --save

    2.引入lib-flexible

    在main.js中引入lib-flexible

    import 'lib-flexible/flexible'

    3.安装px2rem-loader

    npm install px2rem-loader

    4.配置px2rem-loader

    在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,将下面代码加进cssLoaders方法中

      const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUint: 75
        }
      }

    同时,在generateLoaders方法中添加px2remLoader

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

    5、重启

    当配置完之后,重启下服务,px会自动转化为rem了

    npm run dev

    6、注意事项

    1、不能在index.html的头部加 name 为 viewport 的 meta 标签,flexible会自动为我们添加!

    2、对css中文字样式增加/* px */后缀,会编译出适应不同dpr的字号

    .text{
        font-size: 28px; /* px */
    }
    // 会被编译成如下:
    
    [data-dpr="1"] .text { // data-dpr是由flexible计算出来并加在html上的设备像素比
        font-size: 14px;
    }
    
    [data-dpr="2"] .text {
        font-size: 28px;
    }
    
    [data-dpr="3"] .text {
        font-size: 42px;
    }

    3、对边框样式增加/* no */后缀,会保持原样

    .box{
        border: 1px solid #fff; /* no */
    }
    // 会被编译成如下:
    .box{
        border: 1px solid #fff;
    }
  • 相关阅读:
    Visual Studio 2019 XAML Hot Reload功能介绍
    C#开启和关闭UAC功能
    使用Powershell启用/关闭Windows功能
    解决C#调用COM组件异常来自 HRESULT:0x80010105 (RPC_E_SERVERFAULT)的错误
    ComPtr的介绍以及使用
    C#使用Selenium
    estimateAffinePartial2D 替代 estimateRigidTransform
    mtcnn
    pytorch 指定GPU
    cv2.imread()与PIL中Image.open(),以及相互转换
  • 原文地址:https://www.cnblogs.com/clicklin/p/9370223.html
Copyright © 2011-2022 走看看