vue 移动端项目rem布局

它的原理是借助px2rem 插件方便的将px单位转为了rem

  • 安装
npm install px2rem-loader  lib-flexible --save 
  • 在main.js中引入lib-flexible
  • import 'lib-flexible/flexible.js'
    

     

  • 在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)组件中编写的下的css

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

    (3)在组件的中引入css

    另外的情况不适用:

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

    (2)外部样式:

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

     

你可能感兴趣的:(vue 移动端项目rem布局)