Как правильно установить размер шрифта тега html для использования rem единиц?

Question

[Леонид Нимченко]

Здравствуйте. Пишу мобильное приложение для Android на Cordova. Проверяю в браузере, а потом создаю приложение. Для задания размеров использую единицы rem. Для них нужно указать размер шрифта тега html. Сначала задал его как 1% - в браузере отображается нормально, в Андроиде размеры элементов увеличены где-то в двое. Потом задал размер шрифта скриптом:

var dw = document.documentElement.clientWidth;
var nfs = dw/100;
document.getElementsByTagName('html')[0].setAttribute('style', 'font-size: '+nfs+'px')

, результат такой же. Причём при разрешении экрана телефона 1280х720 переменная dw равняется 360. Вообще не пойму почему. Подскажите пожалуйста как правильно задать размер шрифта в теге html для данного случая? Если это невозможно, как правильно задавать резиновые размеры, включая размеры шрифтов?

Answer 1

[lamer350]

Вам нужно поправить знания о величинах. Обратится к гуглу и вы многие вопросы для себя закроете.
REM - это величина относительно font-size заданного в html, в данном случае 1rem - это 100% (а не 1%) от font-size указанного по умолчанию для html, к адаптивной верстке, адаптивности шрифтов - это никакого отношения не имеет вовсе. Вообще все зависимоти размеров шрифта ведут либо от родительского элемента с заданным font-size, либо от заданого для всего документа, никакой зависимости от размер экрана быть не может (кроме вашего примера с JS)
В адаптивной верстке используют @media запросы.
Но ваша задача вообще не понятна, в отдельных случаях можно задать ширину viewport и тогда страница будет масштабироваться под экран, при этом все элементы будут всегда на своих местах.

Comments

[Леонид Нимченко]

Я пытался задать font-size тега html в 1% от ширины экрана, тогда 1rem у меня тоже 1% от ширины экрана. media запросы мне не подходят, так как мне нужна резина а не скачки. По поводу viewport мне не понятно от чего задавать размеры.

[lamer350]

Леонид Нимченко, я же выше писал font-size от размера экрана не может зависеть, все зависимости rem/em/% - считаются от размера родительского шрифта.
@media Это скачки у вас в браузере когда вы его таскаете, на телефонах нет возможности изменять размер окна браузера/приложения и у них не будет скачков.
viewport - все просто, задаете к примеру
<meta name="viewport" content="width=640">
Делаете верстку под 640 пикселей с учетом того что на экранах 320 пикселей - страница будет в масштабе 50% открываться). Тоисть браузер будет ваши 640 пикселей масштабировать под размер экрана (но только в меньшую сторону, если экран будет больше - то контент будет либо по центру, либо по левому краю). Общем проще сверстать и понять как это работает чем объяснять, попробуйте. По сути работа будет такая же как бы открыли какое либо фото в браузере и оно всегда масштабируется по умолчанию под ширину экрана.