隨着web時代發展和html5的出現，前端對網頁的要求越來越高了，網頁設計單位是涉及到我們佈局的效果，使用不同的單位會對最終的結果，會有不同的表現和效果。
現在大部分的項目需求都是需要響應式設計，需要去適配各種設備，比如：電腦，手機，平板。如果單位不合適，那麼有可能在這個設備佈局效果是正常的，另一設備佈局效果錯亂，就會得不到很好的適配，所以我們需要選擇合適的單位來適配各種設備。
接下來簡單的介紹一下相關單位以及他們各自的特地拿和他們之間的區別：
1、px 單位
px就是pixel的縮寫，意爲像素。px就是設備或者圖片最小的一個點，比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。
也是我們網頁中常用的基本單位，通過px可以設置固定像素，固定的字體大小等，無論設備怎麼改變，設置的值都不會改變。
缺點：沒有彈性，不能隨設備的變化而變化，達不到適應所有設備的效果
2、% 單位
一般是相對於父元素的寬高的大小來顯示的，比如父元素width：1000px，那麼子元素設置width：80% = 800px
但是也要值得注意：
1、對於普通定位元素就是我們理解的父元素
2、對於position: absolute;的元素是相對於已定位的父元素
3、對於position: fixed;的元素是相對於ViewPort（可視窗口）
3、em單位
參考物是父元素的font-size，具有繼承的特點。如果自身定義了font-size按自身來計算（瀏覽器默認字體是16px），整個頁面內1em不是一個固定的值。
特點是
1. em的值並不是固定的；
2. em會繼承父級元素的字體大小。
4、rem單位
rem是相對於根元素html，這樣就意味着，我們只需要在根元素確定一個參考值，可以設計HTML爲大小爲12px，到時設置1rem就是12px.以此類推。
優點是，只需要設置根目錄的大小就可以把整個頁面的成比例的調好。
5、vw單位
vw是viewpoint width的縮寫，意味着視窗（可視窗口）的寬高的，比如可是窗口寬度爲375px，那麼1vw = 3.75px
6、vh單位
vh是viewpoint height的縮寫，意味着視窗的高度，比如可視窗口的高度爲600px，那麼1vh = 6px
7、vm單位
css3新單位，相對於視口的寬度或高度中較小的那個的倍數，例如瀏覽器的height=900px，width=1200px,那麼1vm = 9px
但是這個瀏覽器的兼容不是很好
以上的話也是我個人對css中常見的單位的一些理解，具體區別，看他們自己的優缺點就能總結出來了，一般響應式佈局的話我使用 vw + rem 的形式佈局，比較完美。