前端就是一個大雜燴，做為前端工程師需要掌握的知識點太多了。各種長度單位需要我們去了解

除了這些還有印刷單位 pt pc pt cm mm in....

毫無疑問現在統治前端的長度單位還是px, 一個相遇對于屏幕分辨率的像素單位。

px: 全稱pixel（像素）是圖像的基本采樣單位，它不是一個确定的物理量，也不是一個具體的點或者小方塊（雖然可以用點和小方塊來呈現），而是一個抽象概念。它是一個相對單位，相對于屏幕分辨率，而不是視窗大小。像素越高像px長度越小。

如果你要開發響應式頁面px就顯得力不從心了。需要寫很多的媒體相應去調整頁面布局。

然後em橫空出世。

em:相對單位，基準點為父節點字體的大小.

這個貨是個富N代，總是以倍數的方式來繼承父元素的px值,如果自身定義了font-size按自身來計算（大多浏覽器默認字體是16px），整個頁面内1em不是一個固定的值。

舉個栗子：

<div style="font-size:1.2em;">1.2em <div style="font-size:1.2em;">1.2em <div style="font-size:1.2em;">1.2em <div style="font-size:1.2em;">1.2em <div style="font-size:1.2em;">1.2em</div> </div> </div> </div> </div>

顯示效果：

HTML根元素默認為16px 那麼16 x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。 最内層的元素的字體大小就是39.8px；

為了使用方便，用em時，我們通常在CSS中的body選擇器中聲明font-size=62.5%（使em值變為 16px*62.5%=10px）, 之後，你隻需要将你使用的px值除以10，即可得到em值，如：12px=1.2em, 10px=1em。

em使用起來太麻煩了。麻煩不怕，隻要有麻煩就有懶人出來想辦法，把他搞定。

于是rem跳了出來：

rem:是CSS3新增的一個相對單位，相對的隻是HTML根元素.也就是每個元素通過倍數乘以根元素的px值。

rem,是非常傳統的隻認根元素（HTML）上的單位。那麼如果你改變了根元素上的字體大小。整個頁面字體大小也會随之改變，因為這個特點非常适合做響應式開發的頁面長度單位。

那麼我們隻需要使用js來實現根據頁面分辨率調整html的字體大小就可以使适應不同的分辨率。

突然出現了一個rpx。

rpx: 微信小程序專用單位，可以根據屏幕寬度進行自适應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

為啥要把它列出來呢，因為已經有了微信小程序工程師的職位。可見微信小程序的影響力有多大。

%：百分比，實在沒啥好介紹的。此處略過一萬字。

其他跑龍套的字體

pt：印刷機的每個「點」，定義為1 pt ＝ 1/72 in，如果在72 dpi的系統上1 px = 1 pt，但如果在96 dpi的系統上1 px = 0.75 pt ( 72 /96 = 0.75 )。

in：英寸，在96 dpi的系統上1 in = 96 px。

cm：厘米，在96 dpi的系統上1 cm = 37.795275593333 px。

mm：毫米，在96 dpi的系統上1 mm = 3.7795275593333 px

好了，聊完了，祝各位在像素世界裡玩兒的開心。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!