（六）移动端适配——post-css

常用适配方案

• 不同端使用不同代码，如：PC端一套代码，移动端一套代码
• 不同端使用同一套代码，一般使用CSS样式来控制   @media
• 移动端屏幕适配
  • 利用rem 按根节点body 字体大小来缩放
  • 利用vh/vm 按屏幕高度和宽度来缩放

rem 适配方案

• 将css属性单位从px改为rem
• 动态获取用户设备的屏幕宽度

  fontSize(body) = width(屏幕) * fontSize(设计稿中的body) / width(设计稿中的屏幕)

  从以上公式就可以计算出   body 的 font-size 

  • 解决了动态适配各端，统一修改各个端的字体px值

• px 转 rem

  rem(css属性) = px(css属性) / px(body的fontSize)

  • 这里就需要使用工具（post-css），让工具帮助我们手动计算

post-css

• css 转换工具
  • autoprefixer：自动管理 css 属性的浏览器前缀
  • postcss-pxtorem： px 转换为 rem

 安装配置步骤

1. 安装postcss autoprefixer postcss-pxtorem

    npm i  postcss autoprefixer postcss-pxtorem -D

2. 配置postcss.config.js，在根目录下创建postcss.config.js

   module.exports = {
       plugins: {
           autoprefixer: {
               // css前缀适配
               overrideBrowserslist: ['Android >= 4.0', 'iOS >= 7']
           },
           'postcss-pxtorem': {
               // 根节点的 fontSize 值
               rootValue: 16,
               propList: ['*'],
               selectorBlackList: [':root'],
   
           }
       }
   }

3. 设置body 的 fontSize：动态获取用户设备的屏幕宽度，在main.ts

   /* 设置body的css */
   // 设计稿的字体大小，设备宽度
   const rootValue = 16
   const rootWidth = 390
   // 获取用户设备宽度
   const deviceWidth = document.documentElement.clientWidth
   // body的fontSize
   document.documentElement.style.fontSize = deviceWidth *  rootValue / rootWidth + 'px'