钉钉内自建应用 vue2 postcss-pxtorem px转rem没有生效，如何解决？

在使用Vue2配合PostCSS的postcss-pxtorem插件进行px转rem时，如果遇到在钉钉内自建应用中移动端显示不正常，而PC端显示正常的情况，这可能是由于一些配置不当或者适配问题引起的。以下是一些建议和排查步骤：1. 检查postcss-pxtorem配置： 确保你的postcss.config.js文件中的postcss-pxtorem配置正确无误。一个基本的配置示例如下：

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-url'),
    require('postcss-preset-env')(),
    require('postcss-pxtorem')({
      rootValue: 37.5, // 根据设计稿宽度和设备独立像素确定，例如设计稿为750px宽，则rootValue为750/20=37.5
      propList: ['*'], // 转换为rem的属性列表，星号表示所有属性
      exclude: /node_modules/i, // 排除转换的文件或目录
      mediaQuery: false, // 是否在媒体查询中转换px，默认false
      minPixelValue: 2, // 设置最小的转换数值，小于这个值的px不会被转换
    }),
  ],
};

确认rootValue是否根据你的设计稿和目标设备进行了正确的计算。2. 兼容钉钉内置浏览器： 钉钉内嵌的浏览器可能对某些CSS特性支持不完全，或者存在一些特定的行为。尝试增加一些钉钉专有的CSS前缀或者hack来确保兼容性，尽管这不是px转rem直接相关的，但有时候能解决显示问题。3. 检查Vue项目配置： 确认你的Vue项目中是否有针对移动端做特别的配置，比如是否正确设置了meta标签的viewport，确保页面能够正常缩放。4. 清除缓存与重新编译： 有时候，由于缓存问题，新的CSS规则可能没有被正确应用。尝试清理浏览器缓存，重新编译项目，并强制刷新页面查看效果。5. 检查元素的font-size： 确保你的根元素（通常是html或body）的font-size被正确设置。postcss-pxtorem依赖于这个基础字体大小来进行rem的计算。6. 调试与日志： 使用浏览器的开发者工具检查元素的实际样式，确认rem单位是否已经应用以及计算是否符合预期。同时，可以开启PostCSS的详细日志输出，查看是否有错误或警告信息。此回答整理来自钉群“钉钉开发者社区（互助群）”。