zoukankan      html  css  js  c++  java
  • px2rem

    vue做移动端适配,借助px2rem 插件方便的将px单位转为了rem

    1、安装

      npm install px2rem-loader  lib-flexible --save 

    2、在项目入口文件main.js中引入lib-flexible

      import 'lib-flexible/flexible.js'

    3、在build下的 utils.js中,找到generateLoaders 方法,在这里添加 

      const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
          remUnit: 37.5
        }
      }

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

            })
          })
        }

      }

      重启项目,会发现自己设置的px被转为rem 了

      以上实现转换适用于: 

      (1)组件中编写的<style></style>下的css

      (2)从index.js或者main.js中import ‘../../static/css/reset.css’引入css

      (3)在组件的<script type=”text/ecmascript-6″> import ‘../../static/css/reset.css'</script>中引入css

      另外的情况不适用:

      (1)组件<style></style>中@import “../../static/css/reset.css (可考虑上面(2)、(3)的形式引入)

      (2)外部样式:<link rel=”stylesheet” href=”static/css/reset.css”>

      (3)元素内部样式:style=”height: 417px; 550px;”

  • 相关阅读:
    hdu 5444 Elven Postman 二叉树
    tensorflow2.x模型保存问题
    【NVIDIA】Win10 + CUDA10 + cuDNN 安装教程(转载)和遇到的坑
    windows下 为不同虚拟环境配置不同的cuda
    多线程
    socket编程
    引用类型和值类型
    记录报错
    github下载慢问题
    LabelImg的安装出现No module named 'libs.resources'错误
  • 原文地址:https://www.cnblogs.com/tanxiang6690/p/9496166.html
Copyright © 2011-2022 走看看