解决 postcss-px 组件，动态配置的页面样式不能适应问题。

一只大盆友2024-04-19 18:10

js 复制代码

const pxToRem = (px:any) => {  
if(!px) return ''  
if( typeof px === 'string'){  
// eslint-disable-next-line no-param-reassign  
px = Number(px)  
}  
// console.log('px', px)  
return `${(px/2)/(1600/20)}rem`  
}

方法先双手供上，寥表诚意。

理论上，该方法解决了px转 rem 的问题。对 postcss-px2rem 、 postcss-px-to-viewport 或者其他 postcss 衍生的组件应用场景下同样有效，是一个很好的补充。

===========

目前情况是这样的，项目上搞了一个配置活动页面的功能，一个管理端，一个 PC 端，管理端有预览页面和iframe 加载的 0.5x 的预览页面，PC端有一个完整的预览页面。如果浏览窗口过小或者过大的话，配置页初始化的图片、视频、pading、圆角等尺寸会跟项目打包时候 postcss 处理过的项目的样式产生冲突，导致页面尺寸出现各种问题。情况如下：

[这里放个小尺寸场景图，基本能够看个大概]

后来就开始研究怎么解决，先是考虑就把客户提出的主要的顶部间距的 paddingTop 值按照浏览器屏幕主要尺寸版本乘一下系数，解决下就好，但是这个方法还是解决不了低分辨率下的渲染问题，也就是配置的页面没法预览。情况如下：

所以还是需要从根本上寻找解决问题的方法，去了解下 postcss 的工作方式，最终得到了上面的方法。这里记录下，以便日后取用，同时回馈社区。具体用例如下：