網(wǎng)頁(yè)美工設計

網(wǎng)頁(yè)設計中的樣式單位px、em、rem區別

編輯：時(shí)間：2017-06-22 08:42:21

　　「rem」是指根元素（rootelement）的字體大小，那么它的優(yōu)點(diǎn)也就是不會(huì )隨著(zhù)父元素的字體大小變化而變化了，減少了父子元素之間字體大小計算的復雜程度。使用「rem」的目的就是讓用戶(hù)可以在瀏覽器設置中可以自定義字體的大小。

　　1、px精確的單位；

　　2、em為相對單位（相對父級元素）

　　3、rem為相對單位（相對根元素html）

　　em的計算是基于父級元素的，在實(shí)際使用中給我們的計算帶來(lái)了很大的不便。所以rem的出現解救了我這樣不會(huì )算術(shù)的人，再也不用擔心父級元素的font-size了，因為它始終是基于根元素（html）的。比如默認的htmlfont-size=16px，那么我想設置12px的文字就是：12÷16=0.75（rem）。

　　國內的設計師大都喜歡用px，而國外的網(wǎng)站大都喜歡用em和rem，那么三者有什么區別，又各自有什么優(yōu)劣呢？

　　PX特點(diǎn)

　　1.IE無(wú)法調整那些使用px作為單位的字體大小；

　　2.國外的大部分網(wǎng)站能夠調整的原因在于其使用了em或rem作為字體單位；

　　3.Firefox能夠調整px和em，rem，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內核)。

　　px像素（Pixel）。相對長(cháng)度單位。像素px是相對于顯示器屏幕分辨率而言的。em是相對長(cháng)度單位。相對于當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。任意瀏覽器的默認字體高都是16px。所有未經(jīng)調整的瀏覽器都符合:1em=16px。那么12px=0.75em,10px=0.625em。為了簡(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數值除以10，然后換上em作為單位就行了。

　　PX為單位在Web頁(yè)面初期制作中，我們都是使用“px”來(lái)設置我們的文本，因為他比較穩定和精確。但是這種方法存在一個(gè)問(wèn)題，當用戶(hù)在瀏覽器中瀏覽我們制作的Web頁(yè)面時(shí)，他改變了瀏覽器的字體大小，這時(shí)會(huì )使用我們的Web頁(yè)面布局被打破。這樣對于那些關(guān)心自己網(wǎng)站可用性的用戶(hù)來(lái)說(shuō)，就是一個(gè)大問(wèn)題了。因此，這時(shí)就提出了使用“em”來(lái)定義Web頁(yè)面的字體。

　　em為單位前面也說(shuō)了，使用是“px”為單位是比較方便，而又一致，但在瀏覽器中放大或縮放瀏覽頁(yè)面時(shí)會(huì )存在一個(gè)問(wèn)題，要解決這個(gè)問(wèn)題，我們可以使用“em”單位。

　　這種技術(shù)需要一個(gè)參考點(diǎn)，一般都是以body的“font-size”為基準。比如說(shuō)我們使用“1em”等于“10px”來(lái)改變默認值“1em=16px”，這樣一來(lái)，我們設置字體大小相當于“14px”時(shí)，只需要將其值設置為“1.4em”。

<< 上一篇：網(wǎng)頁(yè)設計中圖片有哪些常見(jiàn)的使用技巧

>> 下一篇：怎么把網(wǎng)頁(yè)設計的更有視覺(jué)效果

推薦資訊