с использованием резервных копий с резервным пикселем

Question

Я работаю над мобильным первым фреймворком. Проект имеет широкий диапазон требований, с множеством браузеров и устройств в разных местах для обслуживания. Одним из моих ключевых местоположений для таргетинга является Индия, где тенденции использования браузера и устройства сильно различаются в зависимости от Великобритании и США.

использование браузера Индия http://gs.statcounter.com/#all-browser-IN-monthly-201301-201312-bar

Использование браузера UK http://gs.statcounter.com/#all-browser-GB-monthly-201301-201312-bar

браузеры, которые я должен предназначаться для Индии области являются опера, андроид, UC Browser и Nokia, но каждый из них имеют свои причуды , При этом диапазон устройства отличаются

Opera Mini - не поддерживает бэр Android (до хромом) v2-v4 имеет проблемы с обоими бэр и Эмс с http://www.quirksmode.org/css/units-values/mobile.html

- Я прав, полагая, что более последние версии Android поставляются предварительно с Chrome и браузером ОС?

В идеале я хотел бы использовать 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 poly-fills, таких как https://github.com/chuckcarpenter/REM-unit-polyfill, но могут быть случаи, когда JavaScript не включен, поэтому это не сработает.

Кроме того, я стараюсь сосредоточиться на производительности, поэтому я хочу свести количество запросов к минимуму и сохранить css как можно чище.

Thanks

Answer 1

Оба ваших объявления стиля будут работать нормально. 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: нет, это не тот случай. Это полностью зависит от производителя.

Answer 2

Любая декларация стиля будет работать для вас - если браузер не поддерживает rem, он вернется к значению пикселя.

Это одна из тех ситуаций, когда я установил размер шрифта html на 62,5%, чтобы получить базовый размер шрифта до 10 пикселей. Это делает вычисления очень простыми и легко обнаруживает ошибки в объявлениях вашего типа.

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