很多设计师朋友工作了多年，但对小程序画布是怎么来的，还有它怎么适应不同手机屏幕，还是感到一头雾水。今天，咱们就来聊聊这个，帮大家把基础知识打牢。
想象一下，小程序就像是微信里的迷你应用，它不在手机或电脑的大系统里跑，而是在微信的小天地里玩。所以，小程序得听微信的规矩，而不是苹果、安卓或微软的。
这样做的好处是，开发者只需写一套代码，小程序就能在微信里，不管哪个平台、哪个系统，都长得一模一样。就像网页一样，不管你在哪里，用什么浏览器，打开的网页都一样。
小程序主要在手机上用，它想尽量像原生应用那样，控件、组件、交互方式都差不多。但手机系统不同，细节上就会有些差别，画布大小就是个头疼的问题。
微信给小程序设计了一套自己的语言，包括WXML、WXSS、WXS，分别对应网页的HTML、CSS、JavaScript。控制尺寸和样式的是WXSS，它用的尺寸单位是rpx。
rpx可不是普通的厘米、像素，也不是手机上的pt、dp、sp这些。它很特别，就像微信给小程序量身定制的尺子。
微信在显示小程序界面时，固定把手机屏幕看作750rpx宽。不管你是用iPhoneSE还是iPhone15 Pro Max，都按750rpx来算。换句话说，rpx就是屏幕的1/750。
这个概念有点抽象，手机上用矢量单位是为了屏幕变大时，画布也跟着变大，显示更多内容。这就是适配原则，组件会自动调整布局，适应空间变化。
但小程序不一样，它用最简单的方法——等比缩放。不同尺寸的屏幕，内容就缩放一下，填满窗口。比如同一个小程序，在iPhone13、iPhone15 Pro Max和电脑上截图，把它们缩放成一样宽叠在一起，你会发现元素大小是一样的(除了字体因为系统不同有点差别)。
而正常的手机应用，用的是自动布局，不是等比放大，所以叠在一起不会重叠。
微信的画布就是750rpx宽，适应所有手机屏幕，但高度会根据比例调整，因为不同屏幕的长宽比不一样。
那750这个数是怎么来的呢?一看就知道是iPhone早期和低端设备的分辨率，375的两倍。虽然现在设计已经从375变到390，再到393，但小程序还是用375。
原因和之前说的一样，往大了适配容易，往小了难。现在还有很多375分辨率的设备，微信这么大的体量，肯定得兼容它们。所以，设计和渲染就以最小画布375为准，往上放大，不用担心往下缩小，这样能最大保证兼容性和可用性。
用375的画布没问题，不管你是用iPhone SE还是iPhone Mini为标准都可以。但原则上，因为系统用750rpx，所以用7501334或7501624的画布最好。但实际上，官方组件库用的是375宽。
这又涉及到实际情况了。设计是设计，开发是开发。设计过程中，我们往往会用其他应用设计好的素材，特别是大厂的应用，小程序就像是APP的缩小版。如果把画布做成750，那素材都得重新调整，和重做差不多了。而且，参数和设计师习惯不同，容易出错。
所以，正常创建小程序时，用375的画布就行。开发阶段，程序员可以在标注设置中用2倍的倍率，这样能得到rpx的具体数值。
不过，这里有个隐患。建议设计前和前端程序员核对一下，看看他们懂不懂怎么换算数值，用375有没有问题。如果一定要用750，那就得商量一下，看谁说得对就听谁的。
除了标准的手机画布，还有个奇怪的地方，就是组件库里的Half-screen Dialog组件，宽度是414。这是iPhone 8 Plus/XS Max的规格，总不能还特意去支持这些老古董大屏吧?
其实，414是小程序在电脑端启动时用的规格。未经适配的小程序，在电脑端的窗口就是固定的414*736。736这个高度也和兼容小屏幕有关，就不多说了。而且，小程序在电脑端也可以用响应式适配，但这个需求太少，所以也不多介绍了。感兴趣的朋友可以自己研究一下官方规范。