在div内动态调整文本大小，并响应

Question

我有两个工作的JSFiddle，我想合并和一起工作。

JSFiddle-1：http://jsfiddle.net/MYSVL/3050/

window.onresize=function() {
    var child = $('.artist');
    var parent = child.parent();

    child.css('font-size', '18px');

    while( child.height() > parent.height() ) {
        child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
    }

在这里，艺术家容器内的文字是响应的，当屏幕更大时，它会伸展到最大的字体大小。当屏幕尺寸变小时，它也会缩小到最小的字体大小。

JSFiddle-2：http://jsfiddle.net/MYSVL/3047/

function calcDivHeights() {

     window.onresize=$(".artist").each(function () {

        var child = $(this);
        var parent = child.parent();

        //child.css('font-size', '18px');
        while (child.height() > parent.height()) {
            child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
        }

    });
}

这里的功能是检查每个艺术家div，并根据而条件调整字体大小，但是我无法使它像我的JSFiddle-1那样响应。一旦文本尺寸变小，即使我使屏幕变大，它也会保持较小。我希望我的JSFiddle-2与JSFiddle-1完全一样工作，这样我就可以根据屏幕大小来维护文本的响应能力。

请有人帮助我，或随时修改我的JSFiddle-2，以实现目标。

提前感谢

Answer 1

除了注释的child.css('font-size', '18px')之外，我看不出您的两个摆设之间有什么不同，它们都应该做相同的事情。

您的副手似乎不能正常工作，因为一旦您将窗口调整到较小的分辨率，child就会变小或等于parent。然后，当您返回更大的分辨率时，您再次调用while( child.height() > parent.height() )，但现在您的子节点的高度并不大于您的父级高度。

我想下面这些都会满足你的要求：

​

$(document).ready(function () {

function adjustFontSize() {
    var child = $('.artist');
    var parentHeight = child.parent().height();
    while( child.height() > parentHeight ) {
        child.css('font-size', (parseInt(child.css('font-size')) - 1) + "px");
    }
    while( child.height() < parentHeight ) {
        child.css('font-size', (parseInt(child.css('font-size')) + 1) + "px");
    }
};

adjustFontSize(); // Call it when document is ready
window.onresize = adjustFontSize; // Call it each time window resizes

});

.artist-container {
    width: 20%;
    height: 40px;
    border: 1px solid black;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="artist-container">
    <div class="artist">Audhit Audhit Audhit Audhit Audhit Audhit Audhit</div>
</div><br>
<div class="artist-container">
    <div class="artist">Lorem</div>
</div><br>

​

Answer 2

我认为CSS媒体查询方法对于web响应来说要好得多，而不是一直用Javascript计算一切。

例如，您可以考虑三种大小：

• 电话(比方说，400 say宽度)
• 平板电脑(例如，800 say宽度)
• 计算机(例如，大于800 say宽度)

使用桌面第一方法实现这一目标的一种方法是：

/* DESKTOP */
body {
  font-size: 1em;
  ...
}
...
/* General rules for desktop
...

/* TABLET */
@media screen and (max-width:800px and min-width:400px) {
   /* Overwrite the rules you want to change */
   body {
      font-size: .75em;
   }
   ...
}

/* PHONE */
@media screen and (max-width:400px) {
   /* Overwrite the rules you want to change */
   body {
      font-size: .75em;
   }
   #div1 {
      height: 20%;
   }
   ...
}

除此之外，别忘了与相关单位一起工作(em，vw，vh，rem.)和百分比。

这里你有一个关于响应性设计的很好的链接。