在浏览器根据文本长度和字体大小调整大小后更改 div 的高度是一个好主意吗？

debugcn 发表于 Dev

Ubuntu核心

我在处理带有大量手机文本墙的 div 大小时遇到了一些麻烦

所以，我想到了一个想法“如果有一个基于屏幕宽度/高度的公式可以为该 div 设置适当的高度呢？”

并导致了一些硬编码，例如：

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>

那么，对于这样的事情，有没有更好（更通用）的公式？或者也许有更简单的方法来做到这一点？

苏杰斯·戈皮·纳特

根据 Rory 的建议，我建议使用低于建议的断点的媒体查询

最小宽度：320px（较小的手机视点）最小宽度：480px（小型设备和大多数手机）最小宽度：768px（大多数平板电脑）最小宽度：992px（较小的桌面视点）最小宽度：1200px（大型设备和宽屏）

无论如何，使用 JS 进行设置是一项昂贵的工作！！！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。