Как я могу конвертировать px в vw в JavaScript?

13

Я хочу преобразовать px в vw в JavaScript, как я могу это сделать?

Я искал его, но ничего не нашел.

Итак,

1px →? оч.сл.

Спасибо.

  • 1
    в соответствии с данными решениями - если вы динамически получаете ширину области просмотра для преобразования px в vw, то размер элемента не изменится. так чего ты хочешь добиться?
  • 0
    Просто получите ширину вашего экрана в JS, они сказали. ГЛ; ВЧ
Показать ещё 1 комментарий
Теги:

2 ответа

29
Лучший ответ

1px = (100vw/[document.documentElement.clientWidth] px)

например. — Если ваш видовой экран был 500px широким (по определению равен 100vw), то

1px = (100vw/500px) = 0,2vw

Я использовал .clientWidth для исключить любую полосу прокрутки из расчета

Поделиться
  • 0
    спасибо, я решил это твоим решением
  • 0
    Пожалуйста.
Показать ещё 2 комментария
1

Поскольку 1vw/1vh представляет 1/100th ширины/высоты видового экрана, вы можете достичь этого, используя что-то вроде:

var newWidth = yourElement.outerwidth / document.documentElement.clientWidth *100;
yourElement.style.width = newWidth +'vw';

Я думал об использовании Math.round(), чтобы получить чистый номер, но вы наверняка получите неправильные размеры, если вы исключите десятичные числа.

Не можете ли вы изменить эти значения непосредственно в CSS (например, с другой таблицей стилей)? Кажется действительно грязным, чтобы преобразовать его через Javascript.

Кроме того, согласно комментарию Errand, если вы просто конвертируете свои px в vw/vh, это не сделает ваш текущий HTML/CSS магически подходящим на экране.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню