Px、Rpx、Em、Rem 、Vw/Vh、百分比的區(qū)別？
本文轉(zhuǎn)載自微信公眾號「三分鐘學前端」，作者sisterAn。轉(zhuǎn)載本文請聯(lián)系三分鐘學前端公眾號。
px
絕對長度單位，根據(jù)維基百科解釋：它是圖像顯示的基本單元，既不是一個確定的物理量，也不是一個點或者小方塊，而是一個抽象概念。很多時候，px 也常被稱為 CSS 像素，在 PC 中，通常認為 1px 的真實長度是固定的
那 px 真的是一個設(shè)備無關(guān)，跟長度單位米和分米一樣是固定大小的嗎?
一個像素表示了計算機屏幕所能顯示的最小區(qū)域，像素分為兩種類型：
- CSS 像素：為 Web 開發(fā)者提供，在 CSS 中使用的一個抽象單位
- 物理像素：只與設(shè)備的硬件密度有關(guān)，任何設(shè)備的物理像素都是固定的
轉(zhuǎn)換關(guān)系：CSS像素 = 物理像素/分辨率
假設(shè)PC 端：750 * 1134的視覺稿：1 CSS像素 = 物理像素/分辨率 = 750 / 980 =0.76
假設(shè)移動端(iphone6為例)，分辨率為375 * 667：1 CSS像素 = 物理像素 /分辨率 = 750 / 375 = 2
所以 PC 端，一個CSS像素可以用0.76個物理像素來表示，而iphone6中 一個CSS像素表示了2個物理像素。此外不同的移動設(shè)備分辨率不同，也就是1個CSS像素可以表示的物理像素是不同的
注意，當瀏覽器頁面縮放時，px 并不能跟隨變大。當前網(wǎng)頁的布局就會被打破。
rpx
- rpx是微信小程序獨有的、解決屏幕自適應(yīng)的尺寸單位
- 可以根據(jù)屏幕寬度進行自適應(yīng)，不論大小屏幕，規(guī)定屏幕寬為 750rpx
- 通過 rpx 設(shè)置元素和字體的大小，小程序在不同尺寸的屏幕下，可以實現(xiàn)自動適配
rpx 和 px之間的區(qū)別：
- 在普通網(wǎng)頁開發(fā)中，最常用的像素單位是px
- 在小程序開發(fā)中，推薦使用 rpx 這種響應(yīng)式的像素單位進行開發(fā)
設(shè)計師在出設(shè)計稿的時候，出的都是二倍圖，也就是說如果在這個設(shè)計稿上有一個寬高為 200px 的盒子，那么它最終畫到頁面上實際上是一個寬高為 100px 的盒子，那么再換算成 rpx 需要乘以 2 ，就又變成了 200rpx ，跟設(shè)計稿上的數(shù)字是一樣的，所以我們可以保持數(shù)字不變，直接將單位 px 替換成 rpx
em
相對長度單位，em 是相對于當前元素的父元素的 font-size 進行計算,如果當前元素未設(shè)置則相對于瀏覽器的默認字體尺寸。
- <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 不僅可設(shè)置字體大小，也可以設(shè)置元素寬高屬性。
- <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 的區(qū)別：
- px 對于只需要適配少量設(shè)備，且分辨率對頁面影響不大的，使用 px 即可， px 設(shè)置更為精準 。
- 隨著 rem 在眾多的瀏覽器都得到支持，有需要考慮到對多設(shè)備，多分辨率的自適應(yīng)，無疑這時候 rem 是最合適的(如：移動端的開發(fā))。
vw/vh
CSS3 特性 vh 和 vw：
- vh 相對于視窗的高度，視窗高度是100vh
- vw 相對于視窗的寬度，視窗寬度是100vw
這里是視窗指的是瀏覽器內(nèi)部的可視區(qū)域大小，即 window.innerWidth/window.innerHeight 大小，不包含任務(wù)欄標題欄以及底部工具欄的瀏覽器區(qū)域大小。
百分比
通常認為子元素的百分比完全相對于直接父元素：
- <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>
需要注意的是，如果設(shè)置了top、margin、padding等：
- 子元素的 top 和 bottom 如果設(shè)置百分比，則相對于直接非 static 定位(默認定位)的父元素的高度
- 子元素的 left 和 right 如果設(shè)置百分比，則相對于直接非 static 定位(默認定位的)父元素的寬度
- 子元素的 padding/margin 如果設(shè)置百分比，不論是垂直方向或者是水平方向，都相對于直接父親元素的 padding/margin ，而與父元素的 height 無關(guān)。
px、rpx、em、rem 、vw/vh、百分比的區(qū)別?
- px：絕對長度單位，來描述一個元素的寬高以及定位信息
- rpx：微信小程序獨有的、解決屏幕自適應(yīng)的尺寸單位
- em：相對單位，基準點為父節(jié)點字體的大小，如果自身定義了font-size按自身來計算(瀏覽器默認16px)em作為字體單位，相對于父元素字體大小;em作為行高單位時，相對于自身字體大小，整個頁面內(nèi) 1em 不是一個固定的值。
- rem：相對單位，可理解為”root em”，相對根節(jié)點html的字體大小來計算，CSS3新加屬性，rem作用于非根元素時，相對于根元素字體大小;rem作用于根元素字體大小時，相對于其出初始字體大小。rem布局的本質(zhì)是等比縮放，一般是基于寬度，試想一下如果UE圖能夠等比縮放，那該多么美好啊
- vw/vh：viewpoint width / viewpoint height，vw 相對于視窗的寬度，vh 相對于視窗的高度，1vw等于視窗寬度的1%
- 百分比：1% 對不同屬性有不同的含義。font-size: 200% 和font-size: 2em 一樣，表示字體大小是默認(繼承自父親)字體大小的2倍。line-height: 200% 表示行高是自己字體大小的 2 倍。width: 100%表示自己 content 的寬度等于父親 content 寬度的1倍。
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/511
