vue移动端楼宇模型样式混乱的问题

这段时间在做一个项目，需要用到一个大楼的3d模型，原本是在pc端使用的，但现在需要引入到移动端进行展示，废了我九牛二虎之力终于把这个大楼的3d模型组件给搭建出来了，下面是在pc端展示的样子

pc端展示一切正常。

但当我把这个组件引入到移动端的项目后，问题出现了

很明显，大楼的底座向上偏移了一段距离，当切换为pc视角时，这个偏移的问题变得更加严重

这简直就是惨不忍睹。

问题：为啥在PC端的项目中可以正常展示，但在移动端项目中就会出现问题

当我打开f12检查时，发现了一个小细节

左边是PC端项目的样式，右边是移动端项目的样式，经过对比可以清楚的发现，原本的px像素单位变成了vw，由于我这个大楼模型的组件是完全用px为单位进行开发的，然后再根据外部容器的大小进行scale缩放来控制大小，按道理在移动端是没有必要转换单位的，但它却转换了，是什么导致像素单位转换呢？

postcss-px-to-viewport

就是这个，困扰了我一天的罪魁祸首，

postcss-px-to-viewport 是将px单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件。在pc端盛行的时代 ，如果你不想去适配更多的pc端代码，可以采用它。

如果不是出现了样式错乱的问题，我真没发现它的存在，这个项目的主体框架是从别的地方拷贝过来的，所以自带了这个插件。

既然知道原因了，那问题就好解决了，直接在postcss.config.js配置文件中加上需要忽略转换的类名就行。

module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
      selectorBlackList: ['buildingShowContainer'],
        //buildingShowContainer就是大楼模型组件的类名
    },
  },
};

问题解决！