Geek asks and answers

Using edges with a fallback pixel

I am working on the first mobile framework. The project has a wide range of requirements, with many browsers and devices in different locations for maintenance. One of my key places for targeting is India, where browser and device usage trends are very different from what we see in the UK or the USA.

Using a browser in India http://gs.statcounter.com/#all-browser-IN-monthly-201301-201312-bar

Using a browser in the UK http://gs.statcounter.com/#all-browser-GB-monthly-201301-201312-bar

The browsers that I need to personalize for the india region are opera, android, uc and nokia browser, but each of them has its own little quirks. The range of devices is different.

Opera mini - does not support Android rems (up to chrome) v2-v4 has problems with rems and ems http://www.quirksmode.org/css/units-values/mobile.html

- Do I correctly assume that later versions of Android come pre-loaded with Chrome and the web browser of the OS?

Ideally, I would like to use rems as it fixes the problems of embedded content inheriting the em scale of its parent element. However, based on a study at http://www.quirksmode.org , I need to set a rollback.

So, I will 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 */

- ?

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 poly-fills, https://github.com/chuckcarpenter/REM-unit-polyfill, , JavaScript , .

, , css .

+3
2

. 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 , .

... , .

, , CSS, 1 . , . , , px rem , .

Android- Chrome: , . .

+4

- rem, .

, html 62,5%, 10 . .

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

More articles:


All Articles