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