使用 rem 作为单位使页面自适应设备宽度

一、新建 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)

}

二、在 main.js 中引用上述 rem.js 文件，使得 html 的 fontsize 始终为设备宽度的 1/10：

import remConfig from './common/rem'

remConfig() // 配置rem

window.addEventListener('resize', function () {

  remConfig()

})

三、安装 px2rem-loader：

npm i px2rem-loader

四、配置 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]

五、配置完后重新 npm run dev，webpack就会自动将 css 中的 px 转换为 rem，如果 css 中的某些 px 不想被转换为 rem 可以在后面加上 /* no*/，如下(分号不能省略)：

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

fontsize: 16px; /* no*/

但调用的外部 css 文件中的 px 不会被转换，内联样式中的 px 也不会被转换。

巴特西

使用 rem 作为单位使页面自适应设备宽度

最新文章

热门文章