CSS3中的rem,em與px間的換算關係

國內的設計大師都喜歡用px,而國外的**大都喜歡用em和rem，那三者之間有什麼區別？又各自有什麼優劣呢？

pixel畫素，相對長度單位。畫素是相對於顯示器解析度而言。

相對長度單位，相對於當前物件內文字的字型尺寸，如當前對行內文字的字型尺寸未被設定，則相對於瀏覽器的預設字型尺寸。

任意瀏覽器的預設字型高都是16px。所有未經調整的瀏覽器都符合：1em= 16px。有時為簡化font-size的換算，需要在css中的body選擇器中宣告font-size=62.5%,此時1em=16px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說換算時只需將原有px數值除以10，然後換上em作為單位即可。

特點：

1 em 的值並不是固定的。

2 em的值會繼承父級元素的字型大小。

你猜我字型是多大？ /******css樣式*********/ html

divp

rem是css3新增的乙個相對單位（root em，根em），這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，雖然仍是相對大小，但相對的只是html根元素。通過rem，既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層復合的連鎖反應。

目前除ie8及更早版本外，所有瀏覽器均已支援rem。對於不支援的瀏覽器，可以多寫乙個絕對單位的宣告。如此瀏覽器會忽略rem設定的字型大小。

注意：

1 若沒有在根元素（html字型）指定參照值，那瀏覽器預設1 rem就是16px,若指定值，則1rem就是指定值

2 html設定為62.5%或者10px時會失效，是因為小於12px或者75%的字型大小不支援換算。這可能與有些瀏覽器不支援12px以下的大小有關。所以，使用rem單位，html的字型預設字型大小必須設定為12px或以上。若小於12px則瀏覽器換算時自動預設字型為12px。

移動端適配時，大量的資料轉換非常耗時。對於數學不是很好的娃來講，恩，好討厭。算完一遍之後還要核查一遍。更討厭了。

懶人推動世界進步。前方高能。使用該js，無需meta viewport 進行移動端各個介面的編寫。

//author:caibaojian
//website:
//相容uc豎屏轉橫屏出現的bug
//自定義設計稿的寬度：designwidth
//最大寬度:maxwidth
;(function(designwidth, maxwidth) ;
if (width > maxwidth) 
var rem = width * 100 / designwidth;
rootstyle="html';
rootitem = document.getelementbyid('rootsize') || document.createelement("style");
if(!document.getelementbyid('rootsize'))
if(rootitem.stylesheet)elsecatch(f)
}docel.style.fontsize = rem + "px";
};refreshrem();
win.addeventlistener("resize", function() , false);
win.addeventlistener("pageshow", function(e) 
}, false);
if (doc.readystate === "complete")  else , false);
}})(750, 750);

CSS3中的rem,em與px間的換算關係

CSS3中的rem,em與px間的換算關係

CSS3中的rem值與px之間的換算

CSS3 中的 rem 值與 px 之間的換算

CSS3中的rem,em與px間的換算關係

CSS3中的rem,em與px間的換算關係

CSS3中的rem值與px之間的換算

CSS3 中的 rem 值與 px 之間的換算

相關推薦