前端像素單位之間的區別

一、簡介：

隨着Web的發展，對新的解決方案的需求也會繼續增大，對網頁的要求更高。網頁設計單位是涉及到我們布局的效果，使用不同的單位會對最終的demo，會有影響。而且現在都是要求響應式設計，需要適配各種設備，電腦，手機，平板。如果單位不合適，可能在這個設備顯示良好，那個設備就會打亂布局。所以需要我們選擇合適的單位來進行開發，設計。在前端開發中，會遇到各種不同類型的長度單位，比如px,em,rem等。而整體的長度單位分為兩大類：相對長度 和 絕對長度。

1.絕對長度

絕對長度單位是一個固定的值，它反應一個真實的物理尺寸。絕對長度單位視輸出介質而定，不依賴於環境（顯示器、分辨率、操作系統等）。

2.相對長度

相對長度都有一個基准

其中，px,em和rem用的較多。

em和rem
不同的是：

• em 是相對於所在容器的font-size屬性
• rem是相對於整個html的font-size屬性

二、詳解：

1、px

1）px就是pixel的縮寫，意為像素。
2）px就是設備或者圖片最小的一個點，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像 素點，垂直方向是768個像素點。
3）px是我們網頁設計常用的單位，也是基本單位。
4）通過px可以設置固定的布局或者元素大小。需要注意的是：px 的最小單位是1，所以小數的度量沒有意義。
5）缺點：沒有彈性。

2、rpx

1）rpx 是微信小程序解決自適應屏幕尺寸的尺寸單位。
2）rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。
3）微信小程序規定屏幕的寬度為750rpx。
4）解釋：例如寬度，相當於把屏幕寬度分為750份，1份就是1rpx。高度類似~

3、em

1）參考物是父元素的font-size，具有繼承的特點。
2）如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
3）特點是1. em的值並不是固定的； 2. em會繼承父級元素的字體大小。是用來適配不同屏幕的，最終也會換算成px來進行布局因此對於精確度沒有限制，
4）1em=1倍父元素font-size的值，2em=2倍父元素font-size的值，以此類推……

4、rem

1）rem是相對於根元素html，這樣就意味着，我們只需要在根元素確定一個參考值，可以設計HTML為大小為10px，到時設置1.2rem就是12px.以此類推。
2）優點是，只需要設置根目錄的大小就可以把整個頁面的成比例的調好。用來適配不同屏幕的，最終也會換算成px來進行布局因此對於精確度沒有限制，

5、%

一般來說就是相對於父元素的：
1）對於普通定位元素就是我們理解的父元素
2）對於position: absolute;的元素是相對於已定位的父元素
3）對於position: fixed;的元素是相對於ViewPort（可視窗口），

6、vw

1）css3新單位，view width的簡寫，是指可視窗口的寬度。假如寬度是1200px的話。那100vw就是1200px,10vm就是120px，以此類推……
2）舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。

7、vh

和vw相似
1）css3新單位，view height的簡寫，是指可視窗口的高度。假如高度是1200px的話。那100vh就是1200px，10vh就是120px，以此類推……
2）舉個例子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。

8、vm

1）css3新單位，相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm 舉個例子：瀏覽器高度2）2）900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。
2）兼容性太差 ,不建議使用

三、常見問題

比如說，我根據rem乘以根元素font-size算出的px值有小數，最終是零點幾px咋辦，不同瀏覽器對這個支持程度不同，有的只渲染出零點幾px對應的物理像素，有的干脆都顯示1px，后果就是，同樣的rem值，在不同dpr的設備上寬度不同，最常見的就是邊框，有的設備上顯得特寬，特別扭，也就是經典的1px邊框問題。這個問題的解決方案也有很多，可以通過設置1px，然后根據不同dpr，設置不同的縮放來做，當然也有其他的方案。我這里只是想說rem帶來的一些問題。

四、像素比和寬度比

像素比：dpr是設備像素比，也就是css的設備無關像素px和物理像素的比
寬度比：開發適配的設備的寬度（現在一般是iphone6），和實際的設備的寬度的比
總的來說，可以一句話來總結，像素比實現高清，寬度比實現適配