px、rpx、em、rem 、vw/vh、百分比的區別？

阿新 • • 發佈：2021-07-14

px

絕對長度單位，根據維基百科解釋：它是影象顯示的基本單元，既不是一個確定的物理量，也不是一個點或者小方塊，而是一個抽象概念。很多時候，px 也常被稱為 CSS 畫素，在 PC 中，通常認為 1px 的真實長度是固定的

那 px 真的是一個裝置無關，跟長度單位米和分米一樣是固定大小的嗎？

一個畫素表示了計算機螢幕所能顯示的最小區域，畫素分為兩種型別：

CSS 畫素：為 Web 開發者提供，在 CSS 中使用的一個抽象單位

物理畫素：只與裝置的硬體密度有關，任何裝置的物理畫素都是固定的

轉換關係：CSS畫素 = 物理畫素／解析度

假設PC 端：750 * 1134的視覺稿：1 CSS畫素 = 物理畫素／解析度 = 750 ／ 980 =0.76

假設移動端（iphone6為例），解析度為375 * 667：1 CSS畫素 = 物理畫素／解析度 = 750 ／ 375 = 2

所以 PC 端，一個CSS畫素可以用0.76個物理畫素來表示，而iphone6中一個CSS畫素表示了2個物理畫素。此外不同的移動裝置解析度不同，也就是1個CSS畫素可以表示的物理畫素是不同的

注意，當瀏覽器頁面縮放時，px 並不能跟隨變大。當前網頁的佈局就會被打破。

rpx

rpx是微信小程式獨有的、解決螢幕自適應的尺寸單位
可以根據螢幕寬度進行自適應，不論大小螢幕，規定螢幕寬為 750rpx
通過 rpx 設定元素和字型的大小，小程式在不同尺寸的螢幕下，可以實現自動適配

rpx 和 px之間的區別：

在普通網頁開發中，最常用的畫素單位是px
在小程式開發中，推薦使用 rpx 這種響應式的畫素單位進行開發

設計師在出設計稿的時候，出的都是二倍圖，也就是說如果在這個設計稿上有一個寬高為 200px 的盒子，那麼它最終畫到頁面上實際上是一個寬高為 100px 的盒子，那麼再換算成 rpx 需要乘以 2 ，就又變成了 200rpx ，跟設計稿上的數字是一樣的，所以我們可以保持數字不變，直接將單位 px 替換成 rpx

em

相對長度單位，em 是相對於當前元素的父元素的font-size進行計算,如果當前元素未設定則相對於瀏覽器的預設字型尺寸。

<div class 
="a">A
    <div class="b">B
        <div class="c">C</div>
    </div>
</div>

<style>
 .a{ font-size:16px;}
 .b{ font-size:2em;} /* 相當於32px */
 .c{ font-size:1em;} /* 相當於32px */
</style>

rem

相對長度單位，CSS3 新增的一個相對單位，rem 是相對於根元素（html）的font-size進行計算，rem 不僅可設定字型大小，也可以設定元素寬高屬性。

<div class="a">A
    <div class="b">B
        <div class="c">C</div>
    </div>
</div>
  
<style>
    html{ font-size:16px;}
    .a{ font-size:3rem;} /* 相當於48px */
    .b{ font-size:2rem;} /* 相當於32px */
    .c{ font-size:1rem;} /* 相當於16px */
</style>

px 與 rem 的區別：

px 對於只需要適配少量裝置，且解析度對頁面影響不大的，使用 px 即可， px 設定更為精準。
隨著 rem 在眾多的瀏覽器都得到支援，有需要考慮到對多裝置，多解析度的自適應，無疑這時候 rem 是最合適的（如：移動端的開發）。

vw/vh

CSS3 特性 vh 和 vw：

vh 相對於視窗的高度，視窗高度是100vh
vw 相對於視窗的寬度，視窗寬度是100vw

這裡是視窗指的是瀏覽器內部的可視區域大小，即 window.innerWidth/window.innerHeight 大小，不包含工作列標題欄以及底部工具欄的瀏覽器區域大小。

百分比

通常認為子元素的百分比完全相對於直接父元素：

<div class="a">
    <div class="b"></div>
</div>
<style>
    .a{ width:200px; height:100px; background-color: aqua; } 
    .b{ width:50%; height:50%; background-color: blueviolet; }
</style>

需要注意的是，如果設定了top、margin、padding等：

子元素的 top 和 bottom 如果設定百分比，則相對於直接非 static 定位(預設定位)的父元素的高度
子元素的 left 和 right 如果設定百分比，則相對於直接非 static 定位(預設定位的)父元素的寬度
子元素的 padding/margin 如果設定百分比，不論是垂直方向或者是水平方向，都相對於直接父親元素的 padding/margin ，而與父元素的 height 無關。