vue中使用rem適配方案

一、移動端適配常見方案：

    （1）通過媒體查詢的方式即CSS3的meida queries
    （2）以天貓首頁爲代表的 flex 彈性佈局
    （3）以淘寶首頁爲代表的 rem+viewport縮放
    （4）rem 方式

參考博客：https://blog.csdn.net/chenjuan1993/article/details/81710022

二、vue中使用rem適配方案 

 1、安裝插件

（這裏我使用的是cnpm比較下載安裝快速）

cnpm i lib-flexible --save        // 下載lib-flexible

cnpm install px2rem-loader        // 安裝px2rem-loader

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

import 'lib-flexible/flexible' //引入rem自適應

3、在index.html中添加meta標籤

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4、更改配置

在 build/util.js 中 按如下更改

  (1)、將px2rem-loader添加到cssLoaders中

    const cssLoader = {
        loader: 'css-loader',
        options: {
            sourceMap: options.sourceMap
        }
    }

    const px2remLoader = {
        loader: 'px2rem-loader',
        options: {
            //一般設置75
            remUnit: 75 // 37.5按照375設計圖尺寸在設計，75安裝750設計圖尺寸設計
        }
    }

(2)、在generateLoaders方法中添加px2remLoader

    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
                })
            })
        }

5、重啓

npm run dev

參考：https://www.cnblogs.com/dyy-dida/p/11107639.html

ps:還有一種方法實現

藉助兩個插件，將px進行轉化爲rem。

• lib-flexible 用於設置 rem 基準值。由淘寶手機前端開發團隊編寫的。
• postcss-pxtorem 是一款 postcss 插件，用於將單位轉化爲 rem。

主要步驟：

a、npm i -S amfe-flexible

b、import 'amfe-flexible'; //引入rem自適應

c、在index.html中添加meta標籤

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

d、npm install postcss-pxtorem --save-dev

e、更改配置

在vue-cli2下，根目錄中的 .postcss.js (沒有，就新建一個)

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此處爲添加部分
      rootValue: 37.5, // 對應16px 適配移動端750px寬度
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: [],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

在vue-cli3下,根目錄中的 vue.config.js (沒有，就新建一個)

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px單位換算成rem單位
            rootValue: 37.5, // 換算的基數(設計圖750的根字體爲32)
            selectorBlackList: ['weui', 'mu'], // 忽略轉換正則匹配項
            propList: ['*']
          })
        ]
      }
    }
  }
}