面试官：px、em、rem、vw、rpx 之间有什么区别？

屏幕适配的原理

做移动端布局时，希望页面可以做到用户的手机屏幕越大、看见的页面元素就越大。因此，只能使用相对长度单位。

实际开发中，rem、vw、rpx 是我们比较常用的相对长度单位。

而使用它们的核心思想，就在于要搞懂

设计稿！！！ 大小是 375px ！！！

1. 换算的比例

1rem 等于 多少 px  设计稿
1vw 等于 多少 px 设计稿
1rpx 等于多少 px 设计稿

1. 或者是和屏幕宽度的对应关系

多少 rem 等于屏幕的宽度
多少 vw 等于屏幕的宽度
多少 rpx 等于屏幕的宽度

1. 在搞清楚以上信息后，后续只要在不同的换算工具中代入以上的比例关系即可
   

普通项目中使用

原生的 html、css、JavaScript 直接运行的项目

直接在 vscode 中安装对应的插件即可

rem

需要引入外部 js 来动态处理 html 的字体大小 如 flexible.js

settings.json

"cssrem.rootFontSize": 10 /* 10  10rem=屏幕的宽度   */

vw

settings.json

"px2vw.width": 750 /* 设计稿的宽度 */

rpx

setting.json

"px-to-rpx.baseWidth": 375,/* 设计稿的宽度 */

基于 webpack 的项目使用

基于 webpack 打包的前端项目

webpack 有工具, 可以写 px, 自动转 rem youzan.github.io/vant/#/zh-C…

rem

1. 安装 lib-flexible

yarn add lib-flexible   postcss-pxtorem@^5.1.1

1. 引入 main.js

import "lib-flexible";

1. 观察 10rem = 屏幕的宽度
   
2. 在 postcss.config.js 中 编辑

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      /*  在设计稿的宽度下 1rem = 多少px 37.5     10rem=屏幕的宽度   */
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

vw

1. 安装依赖

yarn add postcss-px-to-viewport

1. 在 postcss.config.js 中配置

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 100 /* 100 设计稿的宽度 */,
    },
  },
};