1.js 原生

;(function(win, doc) {
  change()
  function change() {
   var remSize = window.innerWidth / 7.5 || 50  /*設計稿是以width = 750px 為基準的*/
  document.querySelector('html').style.fontSize = (remSize > 100 ? 100 : remSize) + 'px'
  }
  win.addEventListener('resize', change, false)
  win.addEventListener(
    'orientationchange',
    change,
    false
  ) /* 這個是移動端裝置橫屏、豎屏轉換時觸發的事件處理函式 */
})(window, document)
 

這個在vue專案中也可使用，直接在主入口檔案index.html中寫入，或者你可以將其封裝為一個js方法，在mian.js文中引入

import 'XX.js'  /*必須放在最前面引入*/

2.使用外掛 lib-flexible

1.安裝外掛 lib-flexible

npm i lib-flexible --save

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

import 'lib-flexible/flexible'

3 .安裝px2rem loader

npm install px2rem-loader

4 .配置px2rem-loader

在build檔案中找到util.js，將px2rem-loader新增到cssLoaders中，如：

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

我之前將這個配置錯寫為

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

結果報錯為： 同時，在generateLoaders方法中新增px2remLoader

function generateLoaders (loader, loaderOptions) {
 const loaders = [cssLoader, px2remLoader]
    if (options.usePostCSS) {
      loaders.push(postcssLoader)
    }
 

5.此時配置已經完成，接下來看看使用 在這裡，我們設定了一個div的寬度是200px，