使用 rem 做爲單位使頁面自適應設備寬度

1、新建 rem.js 文件，代碼以下：

export default function () {
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'

  // 禁止雙擊放大
  document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
      event.preventDefault()
    }
  }, false)
  var lastTouchEnd = 0
  document.documentElement.addEventListener('touchend', function (event) {
    var now = Date.now()
    if (now - lastTouchEnd <= 300) {
      event.preventDefault()
    }
    lastTouchEnd = now
  }, false)
}

2、在 main.js 中引用上述 rem.js 文件，使得 html 的 fontsize 始終爲設備寬度的 1/10：

import remConfig from './common/rem'

remConfig() // 配置rem
window.addEventListener('resize', function () {
  remConfig()
})

 

3、安裝 px2rem-loader：

npm i px2rem-loader

 

4、配置 utils.js 文件，在 exports.cssLoaders = function (options) {} 裏面添加下列代碼：

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75 // 設計稿寬度750px
  }
}

 

找到 generateLoaders 函數，獎函數中下列代碼：

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

改成：

const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

/* 或者改成 */

// const loaders = [cssLoader, px2remLoader]

 

5、配置完後從新 npm run dev，webpack就會自動將 css 中的 px 轉換爲 rem，若是 css 中的某些 px 不想被轉換爲 rem 能夠在後面加上 /* no*/，以下(分號不能省略)：

border: 1px solid #ccc; /* no*/
fontsize: 16px; /* no*/

但調用的外部 css 文件中的 px 不會被轉換，內聯樣式中的 px 也不會被轉換。