很多工作了幾年的設計師依然搞不懂小程序畫布創建依據和適配邏輯，所以今天針對這個問題，做一篇簡單的分享，來對這種基礎知識點做個掃盲。
首先小程序之所以叫小程序，因為它不是在手機、電腦系統上運行的應用（Native），而是在微信里運行的應用。也就是說，微信本身有套系統，而小程序的設計要遵循的是微信的設計規范，而不是蘋果、安卓、微軟的設計規范。
這么做的原因是為了讓開發者只用一套代碼，就能在所有平臺、系統上的微信運行，并展示出相同的效果。這個邏輯和網頁類似，不管你在什么平臺還是系統只要安裝了瀏覽器，就可以讀取相同的網頁，而不用針對不同平臺寫一套全新的代碼出來。
雖然小程序主要在移動端運行，它的設計理念會盡量貼合原生應用，多數控件、組件、交互的設計方式一樣，但系統不同必然會導致細節上的差異，而界面的畫布就是最大的問題。
首先小程序官方創建了一套自己的語言，WXML、WXSS、WXS，分別對應網頁前端的 HTML、CSS、JavaScript?？刂瞥叽?、樣式的語言是 WXSS，而它的使用的尺寸單位是 rpx。
rpx 不是厘米、像素這樣的物理單位，也不是移動端會用的 pt、dp、sp 這樣的矢量單位，而是一個很特殊的“
變種單位
”。
微信系統在渲染界面時，固定了移動端視圖窗口為 750rpx。不管你在蘋果還是安卓系統，用的是無劉海小屏 iPhoneSE 還是新款 iPhone15 破兒麥克斯，都使用 750rpx 渲染。
換句話說，
rpx 的長度即 —— 屏幕的 1/750
。
這是個比較抽象的概念，移動端使用矢量單位，是為了在屏幕變大的同時擴大畫布尺寸，提升顯示容量，所以有了適配原則，組件的應用自動布局適應空間的變化。
但是小程序不一樣，微信采用了最簡單粗暴的模式 —— 等比縮放。在不同尺寸的屏幕中，直接縮放內容來填滿窗口。比如下面是使用 iPhone13、iPhone15promax、Mac 端截圖的同一個小程序界面。
如果我們把它們縮放成一樣的寬相互疊加，會發現元素大小是一樣的（Mac 端字體和移動端有差異，所以有一定寬度差異，但是字號相同）。
但正常的移動端應用，使用自動布局而不是等比放大，覆蓋到一起是不會重疊的，比如下面 13 和 15promax 中同一張 APP 界面截圖的疊加。
所以，微信的畫布就是 750rpx 寬適配到所有移動端屏幕，但高度會根據比例調整，畢竟不同屏幕的長寬比不一樣。
再進一步分析，750 這個數值哪來的呢？一看就知道是 iPhone 早期和低端設備的實際分辨率，即 375 的 2x 數值。雖然現在移動端設計已經從 375 過渡到 390 再更新到目前的 393，但小程序依舊使用375。
原因和之前響應式分享中提到的一樣 ——
往大適配容易，往小適配難
！
現在市場上還保留數量可觀的 375 設備，以微信的角色和體量就勢必要兼容它們。既然兼容它們，那
設計和渲染就以兼容的最小畫布為準向上放大
，而沒有向下縮小的顧慮，這可以最大保證兼容性和可用性。
用 375 規格的設備去創建畫布是沒有問題的，不管你是使用 iPhone SE 還是 iPhone Mini 為標準都可以。
因為系統用的 750rpx，所以原則上使用 750*1334 或 750*1624 畫布創建最佳，但實際情況還是有出路。因為官方組件庫用的是 375 寬....
這又涉及到現實情況的考慮，畢竟設計是設計，開發是開發。在設計過程中我們往往會用其它應用設計好的素材，尤其一些大廠應用，小程序就是 APP 的翻版。如果把畫布做成 750 意味著素材得全部重調一遍，和重做差不多，而且參數和設計師習慣不同，會出很多錯誤。
所以，正常創建小程序的畫布使用常規的 375 畫布即可。而在進入開發階段，程序員可以直接在即時、 Figma、藍湖的標注設置中使用 2x 的倍率，既可以獲得 rpx 的具體數值。
這是個隱患問題，建議盡量在設計前和你們的前端程序員核對一遍懂不懂的如何換算數值，創建 375 是否有阻力，如果一定強調要用 750，你再自己展開后續的對線，誰贏了聽誰的……
除了標準移動端畫布外，還有個非常鬼畜的地方，就是組件庫內有個 Half-screen Dialog，里面的組件用的是 414 寬。這數值是 iPhone 8 Plus/ XS Max 的規格，總不能還特意去支持這些古代大屏吧？
414 是小程序在電腦端啟動時使用的規格，未經適配的小程序在電腦端的窗口就是固定的 414*736 。
用 736 這個高也和兼容小屏幕有關就不展開了，且小程序在電腦端也可以使用響應式的適配，只是這個需求實在太少，所以也不在這里多做介紹，感興趣的可以自己研究官方規范。
-
-
-
-
-
創建小程序設計畫布使用 375*667 或 375*812
-
-
作者：酸梅干超人
鏈接：https://www.zcool.com.cn/article/ZMTYzOTY3Ng==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
