兰亭妙微ui设计公司分享：不少从业数年的设计师，依旧没能理清小程序画布的创建依据与适配逻辑。今天就针对这个基础问题做一次科普分享，把底层原理一次性讲透。
小程序之所以名为 “小程序”，核心区别于手机、电脑原生应用（Native）：它是运行在微信环境内的应用。也就是说，小程序设计需要遵循微信自身的设计规范，而非 iOS、安卓或 Windows 的原生规范。
这么设计的目的，是让开发者仅维护一套代码，就能在搭载微信的各类终端、系统上正常运行，且视觉表现保持一致。这套逻辑和网页很相似：无论设备与操作系统，只要安装浏览器，就能访问同一套网页，无需为不同平台单独开发多套代码。
虽然小程序主要面向移动端，设计理念尽可能贴近原生 App，大部分控件、组件与交互形式也基本一致，但不同系统间仍存在细节差异，画布适配就是其中最核心的痛点。
微信为小程序自研了一套前端语言：WXML、WXSS、WXS，分别对应网页的 HTML、CSS、JavaScript。其中负责尺寸与样式控制的是 WXSS，它的专属尺寸单位为 rpx。
rpx 不属于厘米、像素这类物理单位，也不是移动端常用的 pt、dp、sp 矢量单位，是微信定制的特殊适配单位。
微信渲染小程序页面时，会固定移动端视口宽度为 750rpx。无论苹果还是安卓设备，不管是小屏无刘海 iPhone SE，还是大屏 iPhone 15 Pro Max，页面统一按照 750rpx 的基准渲染。
简单理解：1rpx = 屏幕宽度的 1/750。
常规移动端矢量单位的设计思路是：屏幕尺寸变大，画布随之拓宽，承载更多内容，依靠自动布局适配空间变化。但小程序的适配逻辑完全不同，微信采用等比缩放方案：在不同尺寸屏幕上，整体缩放页面内容填满视口。
举个例子，同一小程序页面，分别在 iPhone13、iPhone15 Pro Max、电脑端微信截图。将截图统一缩放到相同宽度后叠加对比，可以看到页面元素尺寸保持一致（电脑端字体渲染规则和移动端存在差异，会带来轻微宽度偏差，但字号基准不变）。
而原生移动端 App 采用自动布局而非等比缩放，将不同手机截图叠加后，元素不会完全重合，二者适配逻辑有本质区别。
所以小程序画布规则：基准宽度固定 750rpx，适配所有移动端设备；高度随屏幕长宽比自动变化。
再说说 750 这个基准值的来源：它源自早期 iPhone 设备分辨率，是 375pt 的 2 倍数值。如今移动端设计标准早已从 375 过渡到 390、393，但小程序依旧沿用 375 基准。
原因一句话总结：向大屏幕放大适配简单，向小屏幕压缩适配很难。
目前市面上仍有大量 375 宽度的存量设备，微信作为平台方必须做好向下兼容。以最小兼容画布作为基准向上放大，可以最大程度保障页面兼容性与可用性，不存在内容压缩出错的风险。
你完全可以基于 375 规格设备搭建画布，以 iPhone SE、iPhone Mini 作为设计基准都没问题。
底层渲染用 750rpx，理论上最优画布尺寸是 750×1334 或 750×1624。但现实工作里还有另一个情况：小程序官方组件库基准是 375 宽。
这就涉及工程落地的现实权衡：设计稿和开发实现是两件事。很多场景下，设计师会复用 App 已有素材，不少小程序本身就是 App 的轻量化版本。如果强行使用 750 画布，原有素材几乎要全部重新调整，工作量接近重做；同时和设计师日常习惯不符，极易产生标注错误。
因此，日常设计小程序，直接使用常规 375 宽画布即可。进入开发环节，前端可以在即时设计、Figma、蓝湖等工具中将标注倍率设置为 2 倍，就能直接换算得到对应的 rpx 数值。
这里有个潜在坑点：建议正式开工前，和前端提前沟通，确认对方熟悉 rpx 换算、评估 375 画布落地是否存在阻力。如果团队坚持要求使用 750 画布，再协商统一规范，以最终敲定方案为准。
除移动端标准画布外，还有一个容易被忽略的细节：组件库中的 Half-screen Dialog（半屏弹窗）基准宽度为 414。这个尺寸源自 iPhone 8 Plus / XS Max，并不是为老旧大屏手机准备的。
414 是小程序在 PC 端微信的默认窗口规格，未做响应式改造的小程序，在电脑端固定窗口尺寸为 414×736。
736 的高度同样出于小屏兼容考量，这里不展开细说。PC 端小程序也支持响应式适配，但业务需求较少，感兴趣可以自行查阅官方设计规范。
本次分享到此结束，希望能帮大家理清小程序画布与适配逻辑。如果一遍没看懂，不妨多看几遍～
