CSS3中的rem,em與px間的換算關係
px,em,rem之間有什麼區別？
國內的設計大師都喜歡用px,而國外的網站大都喜歡用em和rem，那三者之間有什麼區別？又各自有什麼優劣呢？
px
Pixel畫素，相對長度單位。畫素是相對於顯示器解析度而言。
em
相對長度單位，相對於當前物件內文字的字型尺寸，如當前對行內文字的字型尺寸未被設定，則相對於瀏覽器的預設字型尺寸。
任意瀏覽器的預設字型高都是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的值會繼承父級元素的字型大小。
<html>
<div>
<p> 你猜我字型是多大？</p>
</div>
</html>
/******css樣式*********/
html{
font-size:62.5% // font-size:10px 1em:10px
}
div{
font-size:1.2em //font-size: 10 *1.2 =12px
}
p{
font-size:1.2em //font-size= 12*1.2=14.4px
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
rem
rem是CSS3新增的一個相對單位（root em，根em），這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，雖然仍是相對大小，但相對的只是HTML根元素。通過rem，既可以做到只修改根元素就成比例地調整所有字型大小，又可以避免字型大小逐層複合的連鎖反應。
目前除IE8及更早版本外，所有瀏覽器均已支援rem。對於不支援的瀏覽器，可以多寫一個絕對單位的宣告。如此瀏覽器會忽略rem設定的字型大小。
p{
font-size:14px;
font-size:2rem;
}- 1
- 2
- 3
- 4
注意：
1 若沒有在根元素（html字型）指定參照值，那瀏覽器預設1 rem就是16px,若指定值，則1rem就是指定值
2 html設定為62.5%或者10px時會失效，是因為 小於12px或者75%的字型大小 不支援換算。這可能與有些瀏覽器不支援12px以下的大小有關。所以，使用rem單位，html的字型預設字型大小必須設定為12px或以上。若小於12px則瀏覽器換算時自動預設字型為12px。
px,em,rem轉換進階版
移動端適配時，大量的資料轉換非常耗時。對於數學不是很好的娃來講，恩，好討厭。算完一遍之後還要核查一遍。更討厭了。
懶人推動世界進步。前方高能。使用該js，無需meta viewport 進行移動端各個介面的編寫。
//author:caibaojian
//website:http://caibaojian.com
//weibo:http:weibo.com/kujian
//相容UC豎屏轉橫屏出現的BUG
//自定義設計稿的寬度：designWidth
//最大寬度:maxWidth
;(function(designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem,rootStyle;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 540;
};
if (width > maxWidth) {
width = maxWidth;
}
var rem = width * 100 / designWidth;
rootStyle="html{font-size:"+rem+'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if(!document.getElementById('rootsize')){
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id='rootsize';
}
if(rootItem.styleSheet){
rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
}else{
try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
}
docEl.style.fontSize = rem + "px";
};
refreshRem();
win.addEventListener("resize", function() {
clearTimeout(tid); //防止執行兩次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) { // 瀏覽器後退的時候重新計算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57