Является ли хорошей идеей изменение высоты div после изменения размера браузера в зависимости от длины текста и размера шрифта?

Question

У меня были некоторые проблемы с обработкой размера div с огромными стенами текстов для мобильных телефонов

Итак, я пришел с идеей "что, если есть формула, которая на основе ширины / высоты экрана может установить правильную высоту для этого div?"

И в результате получилось что-то вроде hardcode-ish:

https://jsfiddle.net/qmde87kt/ (изменить размер окна просмотра несколько раз)

$(window).resize(function() {
  var div = document.getElementById("test");
  var width = div.offsetWidth;
  var height = (div.innerHTML.length * 70) / width;
  div.setAttribute("style", "height:" + height + "px");

});

#test {
  font-size: 10px;
  border: 2px solid red;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo massa iaculis, elementum dolor bibendum, maximus orci. Aliquam imperdiet metus mi. Vestibulum cursus elementum ex in tempus. Nulla accumsan, ex eget rhoncus mollis, lectus lacus sodales
  neque, ut dictum nibh elit eget tellus. Vestibulum tincidunt quis mi quis egestas. Aenean ultricies purus nunc, id facilisis ante eleifend sed. Proin rutrum luctus turpis, sed pellentesque lorem consequat a. Quisque tortor leo, tempus in ante ac, mattis
  faucibus risus. Praesent tristique, odio ac finibus tristique, neque sapien aliquet dolor, in finibus mauris urna sit amet mauris. In hac habitasse platea dictumst. Praesent nunc est, fringilla in condimentum et, gravida a ligula. Vivamus hendrerit
  mauris a venenatis dictum. Sed vitae mi eget diam dapibus ultricies. Suspendisse varius turpis ante, nec cursus felis luctus et. Etiam ac ligula et tellus viverra tristique sed sodales ex. Nullam accumsan volutpat libero, vel laoreet sem lacinia sit
  amet. Nam id mollis justo.
</div>

Итак, есть ли способ лучше (более универсальный) формула для чего-то вроде этого? или, может быть, есть более простой способ сделать это?

Answer 1

В соответствии с предложением Рори, я бы порекомендовал медиазапросы с нижеприведенными точками останова.

Минимальная ширина: 320px (меньшие точки обзора телефона) Минимальная ширина: 480px (небольшие устройства и большинство телефонов) Минимальная ширина: 768px (большинство планшетов) Минимальная ширина: 992px (меньшие точки обзора рабочего стола) Минимальная ширина: 1200px (большие устройства и широкие экраны)

Установка с JS в любом случае является дорогостоящей РАБОТОЙ!!!