Каким образом отследить ширину окна браузера в 'rem'?

Question

[Тимофей Михайлов]

document.body.clientWidth;
Я понимаю, что ширину окна можно отследить таким способом.
Но как я понял, тут данные выводятся в пикселях.

Вопрос, как мне отловить ситуацию, когда ширина окна браузера равна "15 rem" ?

Значение 'rem', как я прочитал (возможно я ошибаюсь) рассчитывается так:
ширина / размер шрифта.
Возможно, нужно рассчитывать самому по формуле?
Или есть стандартные способы?
p.s. Информацию в интернете найти не удалось ...

Comments

[Тимофей Михайлов]

Проблема в том, что у меня пока не выходит выяснить размер шрифта в пикселях ...
document.body.style.fontSize;
не работает ...

Answer 1

[bm1]

rem зависит от font-size установленного на корневом html элементе, поэтому лучше брать его стили, а получить их можно через метод window.getComputedStyle :

var computedStyle = window.getComputedStyle(document.documentElement);
var fontSize = computedStyle.fontSize; // 16px

и что бы вычислить ширину в rem

var remWidth = document.body.clientWidth / parseInt(fontSize); // parseInt что бы избавиться от 'px' и превратить из строки в число

Comments

[Тимофей Михайлов]

Спасибо большое!!!

А то у меня примерно вот так вышло:

var scr_w = document.body.clientWidth;
	if (document.body.currentStyle){
		var size = document.body.currentStyle.fontSize;
	}
	else if (window.getComputedStyle){
		var size = window.getComputedStyle(document.body, null).fontSize;
	}

	size = size.slice(0, -2);
	console.log( (scr_w / size)+' rem' );

[bm1]

Тимофей Михайлов, Пожалуйста