rem

rem(root em)是一个相对单位，类似于em，em 是父元素字体大小。
不同的是 rem 的基准是相对于 html 元素的字体大小。
比如，根元素(html) 设置 font-size = 12px; 非根元素设置 width: 2rem; 则换成 px 表示就是 24px
(rem: root em，意思是根元素，相对于根元素的字体大小)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: 14px;
        }
        div {
            font-size: 12px;
        }
        p {
            /* width: 10em; */
            /* height: 10em; */
            width: 10rem;
            height: 10rem;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

1.em，相对于父元素，一个页面有多个父元素，这些父元素的字体大小可能不一样。
2.rem，相对于根元素，一个页面只有一个根元素(html)，因此 rem 布局元素之间大小是统一的rem 的优点就是可以通过修改 html 里面的文字大小来改变页面中元素的大小来进行整体控制

使用方式

一、直接使用

在代码中配置好rem比例,代码中直接使用1rem

二、使用插件 px2rem

-1、postcss-px2rem

第一步: 安装插件

npm add postcss-px2rem
//将px转为rem，书写的时候直接写px就可以，编译的时候会将px单位自动转换为对应的rem单位

第二步:添加 rem.js文件

在utils中增加新建config/rem.js

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

第三步: 引入rem

在main.js引入rem.js文件
import './config/rem' //px转rem

第四步: 在 vue.config.js 中添加配置

const px2rem = require('postcss-px2rem');
const postcss = px2rem({
    remUnit: 37.5, //基准大小 baseSize，需要和rem.js中相同
});
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }

注意事项

代码使用px转换必须是在css文件中,直接在标签中写无效

小知识

对于一些布局类的样式宽度，通常采用百分比为单位，如 width: 100%; 又如配合box-sizing: border-box; 设置 width: 25%; 可控制一行放4个 div 容器。
对于一些小组件，如按钮、文字等，直接写设计稿上的 css 尺寸即可。如 font-size, margin, padding, height…… 即使通过 PC 或 Pad 访问也不会丢失效果。
响应式开发中，一般需要指定一个 min-width，这样页面尺寸缩小后，避免如按钮里面的文字不会因为外层容器宽度减小而换行。