目錄

• 1、長度單位包括哪些？
• 2、絕對長度單位
• 3、相對長度單位
• web前端常用長度單位（px，em，rem，pt）

1、長度單位包括哪些？

長度單位：例如，厘米、毫米、英寸。還有像素（px），元素的字體高度（em）、字母x的高度（ex）、百分比（%）等這些單位，可以將它們歸結為兩大類別：
第一類，就是絕對長度單位；
第二類，就是相對長度單位。

2、絕對長度單位

絕對長度單位，它就是一個固定的值，一個真實的物理值，它不隨設備或者受別的因素影響的長度單位。
具體的絕對長度單位主要包括以下幾個：
1）、cm，厘米：一個長度計量單位，1m=100cm。
2）、mm，毫米：與厘米一樣，也是一個長度計量單位，1cm=10mm；毫米同時還是降雨量的計量單位。
3）、in，英寸：這個是美國尺子上都有的單位，1英寸=2.54厘米，12英寸=1英寸。
4）、pt，點（points）：一個印刷度量單位，1英寸相當于72點，例如，將元素p設置為24點的話，就是1英寸的三分之一（1/3）；
5）、pc，派卡（Picas）：一個印刷術語，1派卡相當于12點，6派卡相當于1英寸。

當然，這些單位都是絕對長度單位，在我們的web開發中，運用比較少，主要是因為絕對長度單位不利于頁面屏幕的渲染，他們更多的是被用在印刷、打印等方向。

3、相對長度單位

相對長度單位，例如，px，em，ex，rem；這些都是相對長度單位。
1）px，像素：px是相對于顯示器屏幕分辨率而言。用px設置字體大小時，可能比較穩定和精確。但是這種方法存在一些問題，例如：IE無法調整那些使用px作為單位的字體大小；國外的大部分網站能夠調整的原因在于其使用了em或rem作為字體單位；Firefox能夠調整px和em，rem，但是96%以上的中國網民還是喜歡使用IE瀏覽器。為了保證用戶體驗和web頁面效果，所以在web開發中還引入了“em”這個長度單位。

2）em，元素的字體高度：em是相對于父元素的屬性值而計算的，所以em是非具體的數值。它需要一個參考點，一般都是以的“font-size”為基準。任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合：1em= 16px。有時為簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%,此時1em=16px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說換算時只需將原有px數值除以10，然后換上em作為單位即可。 em 的值并不是固定的；em的值會繼承父級元素的字體大小。

3）ex，所有字體元素中小寫x的高度：這個主要與字體有關，不同的字體，即使設置了相同的字體大小，但是ex的值也有可能不同，主要是因為字體的x高度可能不同。不過這個在我們實際開發中運用比較少，一般設置em后，ex就會默認為em的一半，也有為計算方便，將1ex假設等于0.5em,原因在于，大多數的字體的小寫字母都是相應大寫字母高度的一半。

4）rem，元素字體高度：與em相比較多了一個"r"，是CSS3新增的一個相對單位，是root em，簡寫rem，這個單位與em的區別在于，使用rem為元素設定字體大小時，rem相對的只是HTML根元素。通過rem，既可以做到只修改根元素就可以成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。 目前，除IE9以下的版本外，所有瀏覽器均已支持rem。

另外，我們在開發中還需要注意兩點：

第一，若rem沒有在根元素（html字體）指定參照值，那瀏覽器默認1 rem就是16px,若rem有指定值，則1rem就是等于指定值 。
第二，html設置為62.5%或者10px時會失效，是因為小于12px或者75%的字體大小不支持換算。這可能與有些瀏覽器不支持12px以下的大小有關。所以，使用rem單位，html的字體默認字體大小必須設置為12px或以上。若小于12px則瀏覽器換算時自動默認字體為12px。

web前端常用長度單位（px，em，rem，pt）

1、px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。

2、em是相對長度單位。

相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸，最初是指字母M的寬度，故名em。現指的是字符寬度的倍數，用法類似百分比，如：0.5em, 1em,2em等，通常1em=16px，為了簡化font -size的換算，可以在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。 

em有如下特點：

 因為“em”就是一個相對值，em的值并不是固定的；
 em會繼續父級元素的字體大小。
 計算公式：1 &pide; 父元素的字體大小 × 需要轉換的像素值 = em值，這樣的情況下“1.4em”可以            是“14px”,也可以是“20px”，或者說是“24px”。
 rem（root em，根em）：是CSS3新增的一個相對單位，相對的只是HTML根元素，可以只修改根元素就可以成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。兼容性IE9+都可以兼容，對于不兼容的瀏覽器寫一個絕對單位的聲明就可以了。

3、pt (point，磅)：是一個物理長度單位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)

  px像素（Pixel）。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。
 em是相對長度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸，最初是指字母M的寬度，故名em。現指的是字符寬度的倍數，用法類似百分比，如：0.5em, 1em,2em等，通常1em=16px，為了簡化font -size的換算，可以在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然后換上em作為單位就行了。 
   em有如下特點：
 因為“em”就是一個相對值，em的值并不是固定的；
 em會繼續父級元素的字體大小。
 計算公式：1 &pide; 父元素的字體大小 × 需要轉換的像素值 = em值，這樣的情況下“1.4em”可以            是“14px”,也可以是“20px”，或者說是“24px”。
 rem（root em，根em）：是CSS3新增的一個相對單位，相對的只是HTML根元素，可以只修改根元素就可以成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。兼容性IE9+都可以兼容，對于不兼容的瀏覽器寫一個絕對單位的聲明就可以了。  

到此這篇關于web開發中的長度單位小結的文章就介紹到這了,更多相關web開發長度單位內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的web开发中的长度单位小结(web开发过程)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。