using rems with a pixel fallback

Question

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

Answer 1

Both of your style declarations will work fine. CSS renders code in a cascading fashion, this means if one value is declared after another, the latter will be used. If a browser can render px but cannot render rem, the rem values will simply be ignored. If a browser can render both px and rem, the latter of the two will be used:

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

In this example, rem will be used on browsers which support that unit, and px will be used on those which do not.

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

In this example, px will be used on both browsers which support rem and browsers which do not.

Can I Use... will give you a better overview of which browsers support this unit.

---

As for performance, each character contained within a CSS file equates to 1 byte. The more bytes contained within your stylesheet, the longer it will take a browser to download it. So of course, adding px values alongside rem values will ultimately add to the download time, but most of the time this is negligible.

---

As for whether Android devices come bundled with Chrome: no, this is not the case. This is entirely up to the manufacturer.

Answer 2

Either style declaration will work for you - if a browser doesn't support rems it will fall back to the pixel value.

This is one of those situations where I set the html font-size to 62.5% to take the base font-size down to 10px. This makes the calculations very straight forward and is easy to spot errors in your type declarations.

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