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并根据 while 条件调整字体大小，但我无法像我的 JSFiddle-1 那样使其响应。一旦文本大小变小，即使我使屏幕变大，它仍然会变小。我希望我的 JSFiddle-2 与 JSFiddle-1 完全一致，这样我就可以根据屏幕大小维护文本的响应性。

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

提前致谢

Answer 1

我认为CSS media queries方法对于制作网络响应方式要好得多，而不是一直使用Javascript计算所有内容。

例如，您可以考虑三种尺寸：

电话（比方说，400px宽度）
平板电脑（比方说，800px宽度）
计算机（比方说，> 800px宽度）

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

/* 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 ...）和百分比一起工作。

Here你对响应式设计有很好的联系。

Answer 2

除了评论child.css('font-size', '18px')之外，我无法看到你的两个小提琴之间的差异，两者都应该做同样的事情。

你的第二小提琴似乎无法正常工作，因为一旦你将窗口调整为较小的分辨率，child就会变得小于或等于parent。然后，当您返回更大的分辨率时，再次拨打while( child.height() > parent.height() )，但现在您的孩子身高不会超过您的父高。

我认为以下内容只会满足您的要求：

＆＃13;

$(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

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: