微信小程序----解析px、rpx、rem、vw實現頁面佈局

時間 2020-04-27

標籤微信程序解析 rpx rem 實現頁面佈局欄目 CSS 简体版

原文原文鏈接

PX

px：絕對單位，頁面按精確像素展現。css

在PC端常用的單位，不用計算，直接使用，通常狀況不用考慮設計圖紙的來改變頁面的大小。就直接採用px,方便快捷可是不能自適應。html

RPX

rpx單位是微信小程序中css的尺寸單位，rpx能夠根據屏幕寬度進行自適應。前端

微信的自適應單位，同時微信規定：屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px。git

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2.00rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

REM

rem：相對單位，可理解爲」root em」, 相對根節點html的字體大小來計算。github

微信小程序的rem尺寸單位，rem和rpx的換算關係：rem: 規定屏幕寬度爲20rem；1rem = (750/20)rpx =37.5rpx;小程序

VW

vw、vh、vmin、vmax 主要用於頁面視口大小布局，相對於rem;vw在頁面佈局上更加方便簡單。微信小程序

相對於視口的寬度。視口被均分爲100單位的vw。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則1vw = 7.5px。不用關注是在什麼屏幕下，只用關注設計圖紙的寬度。假如：在750px的設計圖紙，一個字體是30px,那麼font-size: calc(30/7.5)vw，也就是font-size: 4vw。簡單快捷，微信小程序支持，同時自適應很強。微信