uni-app APP不支持pxtocss插件？

uni-app APP不支持pxtocss插件？

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.45

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米

手机机型：Redmi Note 11

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

    "plugins":{  
        "autoprefixer":{ // css兼容前缀  
            overrideBrowserslist:[  
                "Android 4.1",  
                "iOS 7.1",  
                "not id <=11",  
            ]  
        },  
        "postcss-pxtorem":{  
            rootValue:75, // 值为设计稿的宽,设计稿多宽,这里就写多少  
            uniPrecision:6,  
            replace:true, // rem替换px  
            mediaQuery:true, // 兼容媒体查询  
            minPixeValue:1,  
            eclude:/node_modules/i, // 忽略node_modules  
        }  
    }  
`

更多关于uni-app APP不支持pxtocss插件？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app APP不支持pxtocss插件？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


关于uni-app APP不支持px-to-css插件的问题，主要原因在于uni-app的编译机制和HBuilderX的打包流程。

在uni-app项目中，px-to-css/rem这类PostCSS插件通常需要在项目根目录的postcss.config.js中配置。但需要注意以下几点：

  1. uni-app的App平台使用原生渲染，部分CSS特性会受到限制，特别是rem单位在App端支持度有限。

  2. 正确的配置应该是：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 建议使用37.5(基于750设计稿)
      propList: ['*'],
      selectorBlackList: ['norem']
    }
  }
}
  1. 确保项目依赖中已安装postcss-pxtorem：
npm install postcss-pxtorem -D

  1. 在App端更推荐使用rpx单位，这是uni-app内置的响应式单位，能更好地适配不同设备。

  2. 如果必须使用rem，建议通过条件编译针对不同平台使用不同样式方案：

/* #ifdef H5 */
/* H5专用rem样式 */
/* #endif */

/* #ifdef APP */
/* APP专用rpx样式 */
/* #endif */
回到顶部