vue项目中,移动端适配rem

项目_移动端适配

目标

• 脚手架项目集成postcss翻译css代码

适配方案选型

1. PC端一般都是1:1用px还原UI设计图, 靠内容撑开高度
2. 移动端一般都是rem单位进行适配

适配步骤

1. 下载amfe-flexible

   根据网页宽度, 设置html的font-size

   yarn add amfe-flexible
   

2. 到main.js引入

   import "amfe-flexible"
   

3. 下载postcss和postcss-pxtorem@5.1.1

   postcss: 后处理css, 编译翻译css代码

   postcss-pxtorem: 把css代码里所有px计算转换成rem

   yarn add postcss postcss-pxtorem@5.1.1
   

4. 根目录下创建postcss.config.js文件

   对postcss进行设置

   module.exports = {
     plugins: {
       'postcss-pxtorem': {
         // 能够把所有元素的px单位转成Rem
         // rootValue: 转换px的基准值。
         // 编码时, 一个元素宽是75px，则换成rem之后就是2rem
         rootValue: 37.5,
         propList: ['*']
       }
     }
   }
   
   

   37.5 是如何得来的?

   UI移动端设计图宽度375px, 而flexible.js会/10, 设置html的font-size为37.5

小结

1. 移动端适配选择哪种?

   rem + flexible.js

2. flexible.js作用是什么?

   js代码里获取网页宽度 / 10设置html的font-size的值(px单位)

3. 代码里px如何自动转换rem?

   postcss和postcss-pxtorem插件