單位名稱為畫素，相對長度單位，畫素px是相對於顯示器螢幕解析度而言的。畫素的使用性特別廣。使用px定義文字，無論使用者怎麼設定，都不會改變大小。
單位名稱為點（point），絕對長度單位。1pt＝1/72英吋，常用於印刷當中，在ai、ps等設計軟體當中字型大小所用的單位就是pt，它在廣告印刷業當中十分受歡迎，也非常的好用。但現在在網頁當中，pt幾乎不出現了。使用pt定義文字，當使用者設定超過96dpi**化公式：px = pt * dpi / 72）的值，數值越大，字型就越大。
是前端開發中的乙個動態單位，永遠是以當前元素的父元素作為參考進行計算
特點：1.子元素的寬度是以父元素的寬度作為參考計算
2.子元素的高度是以父元素的高度作為參考計算
3.子元素的padding是以父元素的寬度作為參考計算
4.子元素的margin是以父元素的寬度作為參考計算
5.border寬度不能用百分比來設定
單位名稱為相對長度單位。它沒有乙個固定數值，支援小數點後三位數，相對於當前物件內文字的字型尺寸
是css3新增的乙個相對單位（root em，根em），是相對html根元素。通過它既可以做到只修改根元素就可以成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。
是乙個動態單位，是乙個相對於網頁視口的單位
系統會將視口劃分為100份，1vw就占用視口寬度的百分之一，1vh就占用視口高度的百分之一。
永遠都是以視口作為參考
1.我們假設pad的設計稿是以1920px為標準的。那麼：
100vw = 1920px
1vw = 19.2px
我們想要： 1rem = 100px（這樣方便我們在寫**的時候換算）
那麼:100px = 100vw / 19.2 = 1rem
所以：1rem = 5.208vw。
這時候，我們只要給html的根元素設定：
font-size: 5.208vw即可。
2.同理的，手機端我們假設設計稿是以750px為標準的，那麼:
100vw = 750px
1vw = 7.5px
我們想要： 1rem = 100px
那麼：100px = 100vw / 7.5 = 1rem
那麼：1rem = 13.33vw
注：該文章整理於
前端CSS及CSS3常用單位
1.px就是pixel的縮寫，畫素的意思 2.絕對單位，頁面按精確畫素展示 3.缺點 沒有彈性 不適合自適應布局 4.瀏覽器預設字型是16px 1.相對單位，相對於它的父節點字型進行計算 2.如果自身定義了font size按自身來計算 3.缺點 他會根據父級元素的大小而變化 但是如果巢狀了多個元素...
前端畫素單位 px vh vm
非原創 原文出處在底部 px pixel的縮寫，意為畫素 px就是裝置或者 最小的乙個點。如畫素為1024x768，就是說水平方向是1024個畫素點，垂直方向是768個畫素點。是網頁設計常用的單位，也是基本單位。可通過px設定固定的布局或者元素大小。缺點 沒有彈性。rpx responsive pi...
前端學習 長度單位
畫素是我們在網頁中使用的最多的乙個單位，乙個畫素就相當於我們螢幕中的乙個小點，我們的螢幕實際上就是由這些畫素點構成的但是這些畫素點，是不能直接看見。不同顯示器乙個畫素的大小也不相同，顯示效果越好越清晰，畫素就越小，反之畫素越大。也可以將單位設定為乙個百分比的形式，這樣瀏覽器將會根據其父元素的樣式來計...