Vue rem 适配方案

1.此针对web端的适配

1.下载lib-flexible

    npm i lib-flexible --save

2.在main.js中引入lib-flexible

import 'lib-flexible/flexible'

3. 安装px2rem-loader  （自动换算rem）

npm install px2rem-loader 

4.在项目的build\utils.js配置

const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
            remUnit: 192, //基准值  rem基准值 = 设计稿总宽度 / 10; 每个元素的rem值 = 设计稿上元素的px值 / rem基准值
            remPrecision: 8 //换算的rem保留几位小数点
        }
    }
    const postcssLoader = {
        loader: 'postcss-loader',
        options: {
            sourceMap: options.sourceMap
        }
    }
    // generate loader string to be used with extract text plugin
    function generateLoaders(loader, loaderOptions) {
        const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

        if (loader) {
            loaders.push({
                loader: loader + '-loader',
                options: Object.assign({}, loaderOptions, {
                    sourceMap: options.sourceMap
                })
            })
        }
           

在node_modules下找到lib-flexible并配置

2.仅用lib-flexible

1.下载lib-flexiblelib-flexible

    npm i lib-flexible --save

   更改lib-flexible 配置

 2.下载vscode的插件 cssrem

安装完成后打开设置搜索cssrem.rootFontSize 设置rem基准值,

rem基准值= 设计稿总宽度 / 10; 每个元素的rem值 = 设计稿上元素的px值 / rem基准值

            remPrecision: 8 //换算的rem保留几位小数点