1、長(zhǎng)度單位包括哪些？

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

2、絕對(duì)長(zhǎng)度單位

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

當(dāng)然，這些單位都是絕對(duì)長(zhǎng)度單位，在我們的web開發(fā)中，運(yùn)用比較少，主要是因?yàn)榻^對(duì)長(zhǎng)度單位不利于頁(yè)面屏幕的渲染，他們更多的是被用在印刷、打印等方向。

3、相對(duì)長(zhǎng)度單位

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

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

3）ex，所有字體元素中小寫x的高度：這個(gè)主要與字體有關(guān)，不同的字體，即使設(shè)置了相同的字體大小，但是ex的值也有可能不同，主要是因?yàn)樽煮w的x高度可能不同。不過(guò)這個(gè)在我們實(shí)際開發(fā)中運(yùn)用比較少，一般設(shè)置em后，ex就會(huì)默認(rèn)為em的一半，也有為計(jì)算方便，將1ex假設(shè)等于0.5em,原因在于，大多數(shù)的字體的小寫字母都是相應(yīng)大寫字母高度的一半。

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

另外，我們?cè)陂_發(fā)中還需要注意兩點(diǎn)：

第一，若rem沒有在根元素（html字體）指定參照值，那瀏覽器默認(rèn)1 rem就是16px,若rem有指定值，則1rem就是等于指定值 。
第二，html設(shè)置為62.5%或者10px時(shí)會(huì)失效，是因?yàn)樾∮?2px或者75%的字體大小不支持換算。這可能與有些瀏覽器不支持12px以下的大小有關(guān)。所以，使用rem單位，html的字體默認(rèn)字體大小必須設(shè)置為12px或以上。若小于12px則瀏覽器換算時(shí)自動(dòng)默認(rèn)字體為12px。

web前端常用長(zhǎng)度單位（px，em，rem，pt）

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

2、em是相對(duì)長(zhǎng)度單位。

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

em有如下特點(diǎn)：

 因?yàn)?ldquo;em”就是一個(gè)相對(duì)值，em的值并不是固定的；
 em會(huì)繼續(xù)父級(jí)元素的字體大小。
 計(jì)算公式：1 ÷ 父元素的字體大小 × 需要轉(zhuǎn)換的像素值 = em值，這樣的情況下“1.4em”可以            是“14px”,也可以是“20px”，或者說(shuō)是“24px”。
 rem（root em，根em）：是CSS3新增的一個(gè)相對(duì)單位，相對(duì)的只是HTML根元素，可以只修改根元素就可以成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。兼容性IE9+都可以兼容，對(duì)于不兼容的瀏覽器寫一個(gè)絕對(duì)單位的聲明就可以了。

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

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

到此這篇關(guān)于web開發(fā)中的長(zhǎng)度單位小結(jié)的文章就介紹到這了,更多相關(guān)web開發(fā)長(zhǎng)度單位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論