如何在調整大小時更改字體大小以適合其父框？

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");
  }
});

通過使用這種方式，您可以自定義邏輯。