适配--关于根元素font-size和rem🙂

第一步简单粗暴一点直接设置

html {
  font-size: 62.5%;
}

第二步下载postcss-pxtorem插件

npm i postcss-pxtorem 或者yarn add postcss-pxtorem 都可

第三步以vite 举例子

import postCssPxToRem from 'postcss-pxtorem'

export default defineConfig(({ mode }) => {
  // ...省略配置

  return {
 
    css: {
      postcss: {
        plugins: [

          postCssPxToRem({
            rootValue: 16, // 1rem的大小
            propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          }),
        ],
      },
    },
  }
})

添加完插件之后直接在代码中写10px = 0.625rpx 16px=1rem 就完成了基础是适配🙄🙄🙄🙄

个人博客吐槽吐槽