• <td id="om488"><source id="om488"></source></td>
  • 優樂質提示px、em、rem的區別!

    當前位置:網站首頁 > 建站知識

    最近查看網頁案例時,尤其是自適應頁面,總能看見rem的身影,這到底是什么呢,它跟px、em有什么區別呢?


    我們先來看看px這個單位,首先我們國內的設計大師是比較喜歡用px,國外的網站大都喜歡用em和rem。px是精確性的單位,px是相對于顯示器屏幕分辨率而言的。游覽器無法改變以它為單位的字體大小,所以比較適用于一些固定單位的頁面,但是px有一個弊端,就是用戶顯示器的分別率跟我們的不一樣,那么他們在瀏覽我們制作的Web頁面時,很可能我們的Web頁面布局會錯亂。這樣對于那些關心自己網站可用性的用戶來說,就是一個大問題了。這時“em”來定義Web頁面的字體,就華麗上場了。

    em的出現正好解決px不能實現問題,em的值是不固定的,它會繼承父級元素的字體大小。這里就要注意了,在寫CSS的時候,首先body選擇器中聲明Font-size=62.5%;然后將你的原來的px數值除以10,然后換上em作為單位;之后重新計算那些被放大的字體的em數值。避免字體大小的重復聲明。那么問題也就出現了,em是相對于其父元素來設置字體大小的,所以進行任何元素設置,都有可能需要知道他父元素的大小。這樣工作就灰邊復雜了。所以em進化了,rem登場!

    rem是CSS3新增的一個相對單位(root em,根em),rem相對的只是HTML根元素,只是改變根元素就可以成比例的調整所有字體大小了。

    最后還是說說兼容性了。px是適用于任何瀏覽器的,em,rem除了IE6-IE8r,其它的瀏覽器也是支持的。這里為大家提供一個px,em,rem單位轉換工具,地址:pxtoem


    發布時間:2016-01-29 17:28
    轉載請注明文章出自 優樂質
    ? 河北十一选五