移动端适配

一只野生的小飞龙

已于 2023-03-05 18:14:42 修改

阅读量72

点赞数

分类专栏：移动端文章标签：前端

于 2022-07-21 18:39:47 首次发布

本文链接：https://blog.csdn.net/qq_45404030/article/details/125918605

版权

移动端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用postcss及其插件postcss-pxtorem将CSS中的px单位转换为rem，以适配不同屏幕大小。通过设置rootValue为37.5，确保在使用vant组件库时的样式适配。在postcss.config.js中配置转换规则，将所有px属性转换为rem，并重新启动项目以应用更改。

摘要由CSDN通过智能技术生成

解决方法

利用rem和amfe-flexible插件来解决

postcss:后处理css,编译翻译css代码
postcss-pxtorem:把css代码里所有px计算转换成rem

这里的37.5是为了使用vant组件库而使用。

// postcss.config.js
module.exports = {
  plugins: {
    // 能够把所有px转化为rem
    // rootValue:转换px的基准值
    // 编码时，一个宽是75px，转换为rem则是2rem
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}