首頁技術文章正文

什么是WXSS?相比CSS有哪些擴展特性?

更新時間:2023-10-17 來源:黑馬程序員 瀏覽量:

WXSS (WeiXin Style Sheets)是一套樣式語言,用于美化 WXML 的組件樣式,類似于網頁開發(fā)中的 CSS。WXSS 具有 CSS 大部分特性,同時,WXSS 還對 CSS 進行了擴充以及修改,以適應微信小程序的開發(fā)。與 CSS 相比,WXSS  擴展的特性有:

  ? rpx 尺寸單位

  ? @import 樣式導入

1. 什么是rpx 尺寸單位

rpx(responsive pixel)是微信小程序獨有的,用來解決屏適配的尺寸單位。

2. rpx 的實現(xiàn)原理

rpx 的實現(xiàn)原理非常簡單:鑒于不同設備屏幕的大小不同,為了實現(xiàn)屏幕的自動適配,rpx 把所有設備的屏幕,在寬度上等分為750 份(即:當前屏幕的總寬度為750rpx)。

  ? 在較小的設備上,1rpx 所代表的寬度較小

  ? 在較大的設備上,1rpx 所代表的寬度較大

小程序在不同設備上運行的時候,會自動把rpx 的樣式單位換算成對應的像素單位來渲染,從而實現(xiàn)屏幕適配。

1697524514589_rpx 與 px 之間單位換算.png

官方建議:開發(fā)微信小程序時,設計師可以用 iPhone6 作為視覺稿的標準。

開發(fā)舉例:在 iPhone6 上如果要繪制寬100px,高20px的盒子,換算成rpx單位,寬高分別為 200rpx 和 40rpx。


分享到:
在線咨詢 我要報名
和我們在線交談!