微信小程式 尺寸單位rpx與px,rem相互轉換

2021-10-05 02:14:56 字數 1217 閱讀 3109

官方文件:

rpx(responsive pixel): 可以根據螢幕寬度進行自適應。

規定螢幕寬為750rpx。

如在 iphone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素。

裝置rpx換算px (螢幕寬度/750)

px換算rpx (750/螢幕寬度)

iphone5

1rpx = 0.42px

1px = 2.34rpx

iphone6

1rpx = 0.5px

1px = 2rpx

iphone6 plus

1rpx = 0.552px

1px = 1.81rpx

注意:在較小的螢幕上不可避免的會有一些毛刺,請在開發時盡量避免這種情況。

使用@import語句可以匯入外聯樣式表,@import後跟需要匯入的外聯樣式表的相對路徑,用;表示語句結束。

示例**:

/** common.wxss **/

.small-p

@import "common.wxss";

.middle-p

框架元件上支援使用 style、class 屬性來控制項的樣式。

目前支援的選擇器有:

選擇器樣例

樣例描述

.class

.intro選擇所有擁有 class="intro" 的元件

#id#firstname選擇擁有 id="firstname" 的元件

element

view選擇所有 view 元件

element, element

view, checkbox選擇所有文件的 view 元件和所有的 checkbox 元件

::after

view::after在 view 元件後邊插入內容

::before

view::before在 view 元件前邊插入內容

微信小程式 單位rpx與px之間的轉換

可以根據螢幕寬度進行自適應。規定螢幕寬度為750rpx.2 個人示例測試 假設我們需要乙個寬為200px,高為200px這樣的a元素模組 我們分別在iphone5和iphone6上測試px與rpx之間的轉換。iphone5 在iphone5上1px等於2.34rpx,那麼200 2.34 468rp...

微信小程式 rpx單位的理解

如何理解rpx?rpx responsive pixel 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iphone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx 375px 750物理畫素,1rpx 0.5px 1物理畫素。小測試 1 rpx 全稱是什麼?請填寫英...

微信小程式中rpx與rem單位使用

來自 授權位址 rpx單位官方文件 rpx單位基礎介紹 如果看完上面幾篇文章,我們開始進入正題吧 1 js中匯入下面這段 function doc,win if doc.addeventlistener return win.addeventlistener resizeevt,recalc,fal...