使用rems與像素後備

我正在處理移動第一個框架。該項目具有廣泛的要求，在各個位置可以滿足大量瀏覽器和設備的需求。我的關鍵地點之一是印度，其中瀏覽器和設備使用趨勢與英國或美國的差異很大。使用rems與像素後備

印度瀏覽器的使用率 http://gs.statcounter.com/#all-browser-IN-monthly-201301-201312-bar

英國使用的瀏覽器 http://gs.statcounter.com/#all-browser-GB-monthly-201301-201312-bar

，我需要針對印度地區的戲曲，機器人，UC瀏覽器和諾基亞，但每個那些有自己的小怪癖的瀏覽器。與的設備不同

Opera Mini的範圍 - 不支持雷姆的Android（前鍍鉻）V2-V4有兩個REMS和EMS http://www.quirksmode.org/css/units-values/mobile.html

問題 - 我是正確的假設，更最近版本的Android預先安裝了Chrome和OS網絡瀏覽器？

我理想地喜歡使用rems，因爲它消除了嵌套內容繼承其父元素的em尺度的問題。然而基於對http://www.quirksmode.org的研究，我需要有一個回落集。

所以我需要聲明一個px值。

例如，我可以這樣做：

h1 {font-size: 24px; line-height: 30px; margin-bottom: 10px; font-size: 1.846rem; line-height: 2.308rem; margin-bottom: 0.769rem} /* 24px/30px/10px */

還是做我必須做這樣的事情？

h1 {font-size: 24px; line-height: 30px; margin-bottom: 10px} 
h1 {font-size: 1.846rem; line-height: 2.308rem; margin-bottom: 0.769rem} /* 24px/30px/10px */

或者還有其他更好的嗎？

我已經看到幾個js多重填充，例如https://github.com/chuckcarpenter/REM-unit-polyfill，但有些情況下JavaScript沒有啓用，所以這不起作用。

此外，我嘗試着重於性能，所以我想保持請求的數量最少，並保持儘可能乾淨的CSS。

謝謝

來源

2014-02-18 onebitrocket

你的兩個樣式聲明都能正常工作。 CSS以級聯的方式呈現代碼，這意味着如果一個值在另一個之後聲明，後者將被使用。如果瀏覽器可以呈現px但無法呈現rem，則rem值將被簡單地忽略。如果瀏覽器可以呈現px和rem，二者的後者將被使用：

h1 { 
    font-size: 12px; /* 1. Font size set to 12px */ 
    font-size: 1rem; /* 2. Font size set to 1rem, overriding previous value */ 
}

在這個例子中，rem將在其上支持該單元，並且px將在那些確實使用的瀏覽器一起使用不。

h1 { 
    font-size: 1rem; /* 1. Font size set to 1rem */ 
    font-size: 12px; /* 2. Font size set to 12px, overriding previous value */ 
}

在這個例子中，px將在支持rem和瀏覽器哪些沒有這兩個瀏覽器中使用。

Can I Use...可以讓您更好地瞭解哪些瀏覽器支持本機。

至於性能，CSS文件中包含的每個字符等於1個字節。樣式表中包含的字節越多，瀏覽器下載的時間就越長。所以當然，加上px值和rem值最終會增加下載時間，但大部分時間這是可以忽略的。

至於Android設備是否與Chrome捆綁銷售：否，情況並非如此。這完全取決於製造商。

來源

2014-02-18 12:56:16

兩種樣式聲明都適合您 - 如果瀏覽器不支持rem s，它會回落到像素值。

這是其中我將html字體大小設置爲62.5％以將基本字體大小降低到10像素的情況之一。這使得計算非常簡單，並且很容易發現類型聲明中的錯誤。

html { 
    font-size: 62.5%; 
} 
body { 
    font-size: 14px; 
    font-size: 1.4rem; 
}

來源

2014-02-18 12:59:38

使用rems與像素後備

回答

相關問題