如何在调整大小时更改字体大小以适合其父框？

Question

这是我所做的链接
一些较小分辨率的文本会从父框中移出并被剪切。 如何解决？
最好使用jQuery，但我不介意JavaScript。
更新
我想做的是调整页面大小时如何使文本适合其父框？

Answer 1

您可以使用CSS定位屏幕尺寸

@media screen and (min-width: 500px) and (max-width: 700px) {
body{
    font-size: x-small;
    }
}

@media screen and (min-width: 701px) and (max-width: 2000px) {
body{
    font-size: medium;
    }

}   

Answer 2

您可以为此使用fittext.js 。 这些其他解决方案将起作用。 但是，如果您更改浏览器的大小，它可能会开始变得一团糟。

Answer 3

这可以通过使用javascript或jquery完成。 您可以调用jQuery的调整大小功能

$(window).resize(function() {
  if($(this).height() < 640) {
      $(body).css("font-size","10pt");
  }
});

通过使用这种方式，您可以自定义逻辑。