JavaScript相关概念

px、em、rem、vw、rpx 之间有什么区别？

单位名称	说明	web	小程序
px	绝对单位。代表像素数量	支持	支持
em	相对单位。相对于父元素的字体大小	支持	支持
rem	相对单位。相对于页面根标签 html 的字体大小	支持	不支持
vw	相对单位。相对于视口的宽度大小 100vw 等于视口的宽度	支持	支持
rpx	相对单位。 小程序中独有 ， 750rpx 等于视口的宽度	不支持	支持

屏幕适配的原理

 

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

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

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

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

1. 换算的比例

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

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

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

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

   

 

普通项目中使用

原生的 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 Vant 3 - Mobile UI Components built on Vue

rem

1. 安装 lib-flexible

   npm i lib-flexible   postcss-pxtorem@^5.1.1
   yarn add lib-flexible   postcss-pxtorem@^5.1.1
   

2. 引入 main.js

   import "lib-flexible";

3. 观察 10rem = 屏幕的宽度

4. 在 postcss.config.js 中 编辑

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

vw

1. 安装依赖

   npm i postcss-px-to-viewport
   yarn add postcss-px-to-viewport

2. 在 postcss.config.js 中配置

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