Question

如果检测到滚动条，即有足够的内容触发滚动条，我有一个按比例缩小字体大小的函数。

window.onload = function(e) {
  if (document.body.scrollHeight > document.documentElement.clientHeight) {
    document.body.style.fontSize = "7px";
  }
  console.log(document.body.scrollHeight);
  console.log(document.documentElement.clientHeight);
}

body {
  color: black;
  font-family: 'Open Sans', sans-serif;
  padding: 40px;
  font-size: 10px;
}

li {
  font-size: 4.5em
}

<div class="content">
  <ul>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <!--if more stuff added - reduce the font size the right amount so there's is no scroll bar present.-->
  </ul>
</div>

但正如您所见，我目前正在设置静态字体大小为7px，无论页面上的内容量是多少。我想要实现的是计算内容可以拥有的最大字体大小，而不会触发滚动条，具体取决于页面中的内容。

我怎样才能做到这一点？

Answer 1

这是你正在寻找的吗？

＆＃13;

if (document.body.scrollHeight > document.documentElement.clientHeight) {
    document.body.style.fontSize = "7px";
  } else {
     document.body.style.fontSize = "4.5em";
  }

＆＃13;

body {
  color: black;
  font-family: 'Open Sans', sans-serif;
  padding: 40px;
  font-size: 10px;
}

＆＃13;

<div>
  <ul>  
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    <li>Stuff</li>
    //if more stuff added - reduce the font size the right amount so there's is no scroll bar present.
  </ul>
</div>

＆＃13;

Answer 2

嗯，这完全取决于你的字体的风格。但基本上，你需要你的字体大小 - ul高度（或你想要适应的任何滚动元素）除以它的子数。

let ulHeight = document.querySelector('.content ul').clientHeight;
let lisCount = document.querySelector('.content ul').childElementCount; 

let lis = document.querySelectorAll('.content ul li');

[].forEach.call(lis, function(li) {
  li.style.fontSize = Math.floor((ulHeight / lisCount) -2) + 'px' 
});

结帐fiddle

在这个例子中，字体样式有点太大而不能完全适合ul，所以我在另外2个像素中减少了它。注意到我已经向下划分了分区并且ul高度是固定的。修改ul高度或添加更多lis以查看它是否有效。

Answer 3

通过调整窗口大小或更改内容来尝试此操作。我设置的最大字体大小为60px。也许你可以改变它。另外，为了便于阅读，您可以设置最小字体大小。

function resize() {
    var defaultSize = 60;
    $('.content').css('font-size', defaultSize + 'px');
    for (i = defaultSize; document.body.scrollHeight > (document.documentElement.clientHeight*.95); i--) {
        $('.content').css('font-size', i + 'px');
    }
}
$(document).ready(function () {
    resize();
});
$(window).resize(function () {
    resize();
})

ul,li{
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
            <ul>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
                <li>Stuff</li>
            </ul>
        </div>

计算最大字体大小而不触发滚动条

3 个答案: