# px 转为 rem

可以使用的插件：

# 以 postcss-px2rem 为例

每个插件使用方法一致

安装插件：

npm install -D postcss-px2rem

此处假设设计图为 iphone6 的尺寸（375 * 667）:

在全局的样式中配置根元素 html 元素的字体大小，也就是 rem 的大小：

html {
  font-size: calc((100vw) / 3.75);
}

1
2
3

在 vue.config.js 中配置：

// vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          px2rem({
            remUnit: 100, // number，指定 1rem 为多少 px，必须与 html 的字体大小一致。
          })
        ]
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

防止客户端不支持 calc 或 vw 单位，可用 js 在一开始来设置 html 字体大小


// 基准大小
const baseSize = 100

// 设置 rem 函数
const setRem = function () {
  // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}

// 初始化
setRem()

// 监听窗口变化，重新设置 rem 大小
window.onresize = function() {
  setRem()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

注意：手动设置的 rem 大小可以为任意值，但必须与屏幕大小相关，也就是屏幕尺寸变化能引起 rem 大小的变化，同时插件的 remUnit 属性值与手动设置的 rem 大小相同即可。

(function (window, document) {
  var docEl = document.documentElement

  // 设置 1rem = ? px
  function setRemUnit () {
    var rem = docEl.clientWidth / 37.5
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // 监听页面尺寸变化重新设置 rem 大小
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
}(window, document))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20