恳请大家... 最近维护了将近一年的微信小程序， 突然提出要兼容折叠屏，这款小程序主要功能一些图表汇总展示，也就是专门给一些领导用的，也不知道为啥领导们为啥突然喜欢用折叠屏手机了一句话需求，苦的还是咱们程序员，但没办法，谁让甲方是爸爸呢，硬着头皮改吧，好在再说说解决了主要原因是是甲方内部使用的小程序，这里不便贴图，但有官方案例图片，以供参考

具体实现

1.配置 的 globeStyle

 { "globalStyle": { "rpxCalcMaxDeviceWidth": 1200, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960 "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375 "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750 }, }

还好issues 区一位大神有解决办法 感兴趣的老铁可以去瞅瞅

内容缩放拉伸的处理

这一段中提出了两个策略

响应显示区域变化

{ "globalStyle": { "rpxCalcMaxDeviceWidth": 1200, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960 "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度， 换言之... 设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375 "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值،始终按实际的设备宽度计算،单位 rpx،默认值为 750 }, }

策略2省事 设计师按750px屏宽出图,程序员直接按rpx写代码即可。但策略2的实际效果不如策略1好。程序员使用策略1,分析下界面,设定好局部拉伸区域,这样可以有更好的用户体验

项目根目录新增文件 内容如下。则在编译时、编译器会自动转换rpx单位为px。

主要有两大问题：

1. 这是官方的项目啊！为啥人家的可以？我本地跑起来却不可以？让我一度怀疑这里有内幕...
2. 经过几轮测试还是不行...

自适应布局方案对于微信小程序原生开发是可行的,但这个项目用的 uni-app开发的,虽然uni-app 也有对应的.1尺寸不同的情况下内容展示效果兼容问题.从小程序基础库版本2.21.3开始,在Windows、 Mac、车机、安卓WMPF等大屏设备上运行的小程序可以支持大屏模式.，妥妥的！

添加脚本

// const path = require = { parser: 'postcss-comment', plugins: { 'postcss-import': { resolve { if ) { return )} else if ) { return )} else if && !) { return )} return id } }, 'autoprefixer': { overrideBrowserslist: , remove: PLATFORM !== 'h5'} ,//借助postcss- px -to -viewport插件实现rpx转 px文档：https:///evrone/postcss - px -to -viewport /blob/master/README//以下配置可以将rpx转换为1 / 的PX如 pr x = PX如果需要调整比例可以调整viewportWidth来实现 &# x     ‘postcss - PX -to - viewport ’：{ unitToConvert ：‘pr x’ ，viewportwidth ：    unitPrecision ： propList ： ，viewportUnit ：‘PX’ ，fontViewportUnit ：‘PX’ ，selectorBlackList ： ， 我悟了。 minPixelValue ： mediaQuery ：false ，replace ：true ，exclude ：文章浏览阅读 次 。本文介绍了如何使用WXML 、JSON和CSS实现微信小程序的屏幕适配通过设置不同的断点和CSS样式来兼容不同尺寸的手机屏幕确保在 比例的标准屏设备上展示效果良好 。主要涉及图片布局和位置调整以及利用媒体查询进行差异化适配 。屏幕适配器的作用是兼容不同型号的手机进行适配下面我用的是单独写个页面进行实现 。先说说我们看到的是wxml页面 viewclass = contentviewclass = popupimageclass = topsrc = {{cdn + '/top .png'}}/imageimageclass= titleisrc={{cdn + '/title .png'}}/imageimageclass= contentsrc={{cdn + '/conte... 更让人头疼的是 微信小程序实例汇总完整项目源代码 文章浏览阅读次 。大小屏幕兼容示例库代码片段_微信小程序实用兼容大小微信小程序大小屏幕兼容最新推荐文章于发布车家大少爷于发布阅读量收藏点赞数版权声明本文为博主原创文章遵循CC4 BY SA版权协议转载请附上原文出处链接和本声明篇文章订阅篇文章订阅 大小屏幕兼...，扯后腿。