css rems,css - using rems with a pixel fallback - Stack Overflow

I'm working on mobile first framework. The project has a broad range of requirements, with a mass of browsers and devices over various locations to cater for.

One of my key locations to target is India, where the browser and device usage trends differ greatly to that in the UK or US.

The browsers that I need to target for india region are opera, android, uc browser and nokia, but each of those have their little quirks. With that the range of devices differ

Opera mini - does not support rems

Android (prior to chrome) v2-v4 has problems with both rems and ems

http://www.quirksmode.org/css/units-values/mobile.html

-- Am I right in assuming that more recent versions of Android come pre installed with Chrome and the OS web browser?

I'd ideally like to use rems, as it removes the issues of nested content inheriting the em scale of its parent element. However based on the research on http://www.quirksmode.org, I need to have a fall back set.

So I'm going to need to declare a px value.

For example, can I do this:

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 */

Or do I have to do something like this?

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 */

Or is there something else that is better?

I have seen a few js poly-fills, such as https://github.com/chuckcarpenter/REM-unit-polyfill, but there maybe cases where JavaScript is not enabled so this won't work.

Additionally I am try to focus on performance, so I want to keep the number of requests to a minimum and the keep the css a clean as possible.

Thanks