在前端開發中,px是我們必須要了解的一個單位。隨著手機的普及,移動端頁面的開發越來越成熟,雖然px在電腦瀏覽器上是完美的,但是在移動端卻存在著一些問題。因此,32rpx就應運而生。
32rpx是小程序中定義的一種CSS單位,它的相對長度是相對于屏幕寬度的。也就是說,頁面大小的變化并不影響布局的穩定性,且能夠使得不同尺寸的設備上顯示的元素大小,按照我們的預期縮放。
.btn { width: 32rpx; height: 32rpx; font-size: 28rpx; }
上面的代碼片段中,定義了.btn這個類,同時也定義了其寬度和高度為32rpx。在32rpx單位下,按鈕的大小在不同分辨率的屏幕上都是相同的,同時即使在不同尺寸的屏幕上改變字體大小,它也總能做到在各設備間顯示一致性。
需要注意的是,在使用32rpx時,需要保證設計圖中的寬度是750px,即iPhone6,在其他設備上仍能夠保持絕對比例不至于變形。同時,由于32rpx并不是W3C標準,因此僅限于小程序和微信開放平臺中使用,其它平臺則需要根據具體情況選擇不同的單位。
在小程序開發中,32rpx已經成為了眾多開發者的標配,由于其方便與穩定,你是否也想嘗試使用它來布局呢?
下一篇mysql轉移老數據庫