移动端的自适应方案之 rem

设计稿中常用的标准像素单位是 px，当设备宽高不同的时候，网页元素的宽度和高度都要进行适配，所以需要加入移动端的自适应方案

可实现的方案如下：

• 百分比
• 媒体查询
• rem
• vw
• px + calc

百分比的局限：百分比只能让宽度进行自动适配，高度仍然要设置固定的值

媒体查询的局限：媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式，但是太过繁琐

rem

REM，font size of the root element

它是相对单位，是相对HTML根元素( 1 rem = 1 html 标签字号 )

html标签字号就是html元素的font-size大小。注意区分 rem 和 em （em是相对于父元素大小的缩放）

html {
    font-size: 20px;
}

所以，根据不同设备大小来设置元素font-size的大小，进行元素缩放，从而达到适配的效果。

如果习惯了 px 的写法的开发，可以使用 postcss-pxtorem 像素自动转换成 rem，在代码中 css 的单位为 px，在控制台中看到的是rem

postcss-pxtorem 安装与使用

安装：

npm install postcss postcss-pxtorem --save-dev

在 vue.config.js 中配置 css 的 loaderOptions 属性：

• rootValue:16 的含义是：元素宽度/16，比如宽度为 320px，页面会转换为 20 rem
• 其它参数配置可参考官方文档

 css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('postcss-pxtorem')({
              rootValue: 16,
              propList: ['*'],
            }),
          ]
        }
      }
    }
  }

创建一个新文件，并在 main.js 中引入，用来设置基准大小，以及计算窗口变化时的缩放比例（根据页面尺寸），窗口尺寸变化时进行更新。

• baseSize 表示设计稿中 1rem 的大小
• scale 表示实际页面的宽度和设计稿的比值

const baseSize = 32
function setRem() {
  const scale = document.documentElement.clientWidth / 1920  // 当前页面宽度的缩放比例
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'  // 设置页面根节点字体大小
}
setRem()
window.onresize = function () {
  setRem()
}