整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
寫本文的目的主要是為了后面寫H5的相關知識，而且文本中會提到日后要寫的關于H5的三篇（文中加粗長字體）文章的內容，關于H5這個專題感興趣的童靴可以關注我的號。
國內大都喜歡用px，而國外的網站大都喜歡用em和rem，然而，這三者到底有什么區別了？
下面一個一個來看：
px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。在PC側，這CSS的1px往往都是對應著電腦屏幕的1個物理像素（分辨率），移動設備則不是這樣的，知道這一點對移動網頁開發很重要，下回專門來總結這個。
em是相對長度單位，相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。
什么意思了？下面實例解釋一下。
1、暫且認為任意瀏覽器的默認字體高都是16px（真的是這樣嗎？這可是移動開發的一個大大的坑啊，這里為了講單位，先這樣認為罷了，有關這個疑問，我們下回來分析它及其解決辦法）。
所有未經調整的瀏覽器都符合：1em = 16px。那么12px=0.75em，10px=0.625px。
然而，為了簡化font-size的換算，我們可以這么做：
設置：body{font-size:62.5%}
這樣的話，1em=62.5%*16=10px，也就是說只需要將你原來的px數值除以10，就是em單位的數值了。如：
12px=1.2em
2、em的值并不是固定的，它會繼承父元素的字體大小。
比如下面這段代碼：
由上面圖可知，html元素上我們設置了字體大小為16px。p元素的字體大小我們設置了2em，也就是2*16=32px。在往下span元素，我們設置它的字體大小0.5em，這個時候的基準大小相對它的元素。即（1em=32px），也就是0.5*32=16px。下面看一下效果：
由此可見，當元素嵌套一旦變多的時候，em就會顯得很無助。好在我們還有另外一個單元rem。
rem是CSS3新增的一個相對單位（root em，相對根元素），這個單位引起了大家的廣泛關注。它與em一樣是相對單位，只是相對HTML根元素。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。（rem真的就成了我們移動布局的神器了嗎？聽我日后分析）
舉個例子：（還是上面那個例子，除了將p和span的字體大小單位改成rem，還將span的字體大小改成1）
p元素字體大小2rem，相當于就是2*16=32px。span元素的字體大小1rem，相當于就是1*16=16px。所以效果和em的一樣。
這個時候需要注意，為了方便計算，可以將html元素定為62.5%（也就是使用瀏覽器默認字體16px）,這樣，往后的元素以rem為單位，值就只要PX的值除以10就行。
為了提高開發效率，有關單位px、em、rem轉換，也可以借助一些在線的轉換工具，如pxtoem。
傳統的項目開發中，我么只會用到px、%、em這幾個單位，它們可以適用于大部分的項目開發，并且具有良好的兼容性。
從CSS3開始，瀏覽器對計量單位的支持又提升到了另外一個境界，新增了rem、vh、vw、vm等一些新的計量單位。
利用這些新的單位開發出比較良好的響應式頁面，適應多種不同分辨率的終端，包括移動設備等。
在css單位中，可以分為長度單位、絕對單位，如下表所指示
CSS單位 | |
相對長度單位 | em、ex、ch、rem、vw、vh、vmin、vmax、% |
絕對長度單位 | cm、mm、in、px、pt、pc |
今天我們主要講講px、em、rem、vh、vw、vm之間的區別
px，表示像素，所謂像素就是呈現在我們顯示器上的一個個小點，每個像素點都是大小等同的，所以像素為計量單位被分在了絕對長度單位中。有些人會把px認為是相對長度，原因在于在移動端中存在設備像素比，px實際顯示的大小是不確定的。這里之所以認為px為絕對單位，在于px的大小和元素的其他屬性無關。
em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸（1em = 16px）。為了簡化 font-size 的換算，我們需要在css中的 body 選擇器中聲明font-size= 62.5%，這就使 em 值變為 16px*62.5% = 10px。這樣 12px = 1.2em, 10px = 1em, 也就是說只需要將你的原來的px 數值除以 10，然后換上 em作為單位就行了。
特點：
舉個例子:
<div class="big">
我是14px=1.4em<div class="small">我是12px=1.2em</div>
</div>
<style>
html {font-size: 10px; } /* 公式16px*62.5%=10px */
.big{font-size: 1.4em}
.small{font-size: 1.2em}
</style>
復制代碼這時候.big元素的font-size為14px，而.small元素的font-size為12px
rem，相對單位，相對的只是HTML根元素font-size的值。同理，如果想要簡化font-size的轉化，我們可以在根元素html中加入font-size: 62.5%。
html {font-size: 62.5%; } /* 公式16px*62.5%=10px */
復制代碼這樣頁面中1rem=10px、1.2rem=12px、1.4rem=14px、1.6rem=16px;使得視覺、使用、書寫都得到了極大的幫助
特點：
vw是根據窗口的寬度，分成100等份，100vw就表示滿寬，50vw就表示一半寬。（vw 始終是針對窗口的寬），同理，vh則為窗口的高度。
這里的窗口分成幾種情況：
像vw、vh，比較容易混淆的一個單位是%，不過百分比寬泛的講是相對于父元素：
相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm。
舉個例子：瀏覽器高度900px，寬度1200px，取最小的瀏覽器高度，1 vm = 900px/100 = 9 px。
作者鏈接：https://juejin.cn/post/6945618076087894052
想要成為一名合格的前端工程師，會寫頁面絕對不能少，而如果想要頁面寫得出彩，你必須要知道一些網頁常用的基本單位。
在傳統的項目開發中，我們常常會用到px、%、em這幾個單位，因為它能適用于大部分的項目開發，而且擁有比較良好的兼容性。但素，你造嗎？從CSS3開始，瀏覽器對邏輯單位的支持又提升到了另外一個境界，增加了rem、vw、vh、vm等一些新的長度單位，我們可以用這些新的單位開發出比較良好的響應式頁面，以此可以覆蓋多種不同分辨率的設備，包括移動設備等。
那么，接下來我們分別來分析下，這些常用到的單位分別是什么。
1．px
px就是pixel的縮寫，像素，相對長度單位，像素是相對于顯示器屏幕分辨率而言。比如常常聽到的電腦像素是1024x768的，表示的是水平方向是1024個像素點，垂直方向是768個像素點。再比如，px就可以認為是一張圖片最小的一個點，一張位圖就是千千萬萬的這樣的點構成的。
2.em
相對長度單位，參考對象是父元素的font-size，具有繼承的特點，如果當前行內文本的字體尺寸未被設置，瀏覽器使用默認字體尺寸（16px），整個頁面內1em也不是一個固定的值。
3.%
一般寬泛的講是相對于父元素，但是并不是絕對的。
1）、對于普通元素就是我們理解的相對于父元素
2）、對于position: absolute;的元素是相對于已定位的父元素
3）、對于position: fixed;的元素是相對于ViewPort（可視窗口）
4.rem
rem是css3的新單位，相對于根元素html（網頁）的font-size，不會像em那樣，依賴于父元素的字體大小，而造成混亂。這個單位可謂集相對大小和絕對大小的優點于一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
例如：
p{font-size:14px;?font-size:.875rem;}
但是，需要注意的是：
選擇使用什么字體單位主要由你的項目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮兼容性，那就使用px,或者兩者同時使用。一般rem用在移動端可能更多些。
5.vw
vw是css3新單位，viewpoint width的縮寫，即視口寬度。何謂視口，就是根據你瀏覽器窗口的大小的單位，不受顯示器分辨率的影響，是不是很神奇，這就代表了，我們不需要顧慮到現在那么多不同電腦有關分辨率的自適應問題。視口寬度被均分為100單位的vw，1vw等于視窗寬度的1%。
舉個例子：瀏覽器寬度1200px, 1 vw = 1200px/100 = 12 px。和百分比不一樣的是，vw始終相對于可視窗口的寬度，而百分比和其父元素的寬度有關。
6.vh
與vw類似，vh就是可視窗口的高度了。視口高度被均分為100單位的vh，1vh就是高度的1%。看下圖：
7.vm
vm也是css3新單位，相對于視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vm。
舉個栗子：瀏覽器高度800px，寬度1000px，取最小的瀏覽器高度，1 vm = 800px/100 = 8 px。
由于現在vm的兼容性較差，現在基本上很少有人用。
除了上述7種單位，css還有哪些長度單位？
例如：
in 寸
cm 厘米
mm 毫米
pt point磅，大約1/72寸
pc pica派卡，大約6pt，1/6寸
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
