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

Question

Тимофей Михайлов @JimmiJanger

Любопытный активист, под маской ленивого нуба.

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

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

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

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

Вопрос задан более трёх лет назад
124 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Решения вопроса 1

2 комментария

Тимофей Михайлов @JimmiJanger Автор вопроса

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

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

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 @bm1

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 4 часа назад
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 4 часа назад
- 42 просмотра
1

ответ
JavaScript

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 6 часов назад
- 47 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 6 часов назад
- 65 просмотров
0

ответов
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 7 часов назад
- 44 просмотра
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 8 часов назад
- 56 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 10 часов назад
- 100 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- 11 часов назад
- 51 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 11 часов назад
- 73 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 12 часов назад
- 37 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

Мэтч

от 80 000 ₽

Настройка сервера

18 апр. 2024, в 21:56

2000 руб./за проект

Помощь с водпресс

18 апр. 2024, в 21:00

150 руб./за проект

Спарсить ссылки на все товары конкретного продавца в озон

18 апр. 2024, в 20:13

2000 руб./за проект

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

Answer 1 · 2018-05-21 14:29:28

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' и превратить из строки в число

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт