您的位置:網站首頁 > 新聞原創 > 津市網站開發

web網站開發中的長度單位(px,em,ex,rem),如何運用,看完這篇就夠了!

日期:2017-3-9 11:05:27 人氣: 標簽:
分享到:
作為一名前端開發人員,css中的長度單位,都是我們在工作中非常熟悉的名詞,因為沒有它們,我們就不能聲明某個字符應該多大,或者某些圖像周圍應該留白多少,甚至有時候能導致css不能進行正常工作,所以在很多css屬性中,它們都是依賴于長度單位來顯示各種頁面元素。

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);所以,p{font-size:24pt;}與p{font-size:0.33in;}是等價。
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是非具體的數值。它需要一個參考點,一般都是以<body>的“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。

寫在最后

在開發中,我們到底如何選擇長度單位,需要根據實際開發中的具體需求來,例如,像我們這邊有的項目,只需在pc上瀏覽,不需要在移動端進行瀏覽的,也不需要做響應式開發的,其實整個頁面單位,用px,就可以滿足開發需求了;而有的項目,可能需要做響應式開發的,那就要看具體情況而定,但是不管怎么樣,你把長度單位的基本屬性與本質弄明白了,怎么選用,是非常簡單的事情,今天的這篇文章,希望能給大家一點啟發,也希望能幫助到那些對基礎知識點還不了解的同學。
0
0
0
0
0
0
0
0
網友評論 Comments
下一篇:沒有資料