Question

我编写了一个函数，当视口的宽度小于div的宽度时，该函数应动态调整div内的文本大小。由于div的宽度取决于其内容的宽度，因此实际上阻止 div远比视口宽。

我有这种工作，但我遇到的问题是我测试过的浏览器似乎没有正确计算div（#basics）的宽度：当我记录计算出的宽度时如果我自己测量可见像素，显示的结果总是小于实际值。结果是文本的大小调整开始得太晚了，其中一些最终会出现在屏幕外，并且出现了可怕的水平条。

我希望有人可以告诉我我做错了什么。为什么#basics div的宽度计算错误？

我写了一个jsFiddle，但我无法让它工作。我认为问题是我不知道如何在jsFiddle上做window.onload和window.onresize。我在左上角的下拉菜单中的选择也可能是错的......我不知道。欢迎你看看它并告诉我我做错了什么：http://jsfiddle.net/XUmU2/

HTML：

<div id="basicsContainer">
  <div id="basics">
     <p class="left">I'm a graphic/web designer/developer.</p>I'm <span style="font-size: 96%;" class="origin">originally </span>
     <span style="font-size: 92%;" class="origin">from </span>
     <span style="font-size: 88%;" class="origin">Brazil, </span>
     <span style="font-size: 84%;" class="origin">but </span>
     <span style="font-size: 80%;" class="origin">I </span>
     <span style="font-size: 76%;" class="origin">studied </span>
     <span style="font-size: 72%;" class="origin">in </span>
     <span style="font-size: 68%;" class="origin">the </span>
     <span style="font-size: 64%;" class="origin">USA </span>
     <span style="font-size: 60%;" class="origin">before </span>
     <span style="font-size: 56%;" class="origin">moving </span>
     <span style="font-size: 52%;" class="origin">to </span>
     <span style="font-size: 48%;" class="origin">Denmark, </span>
     <span style="font-size: 44%;" class="origin">then </span>
     <span style="font-size: 40%;" class="origin">Norway, </span>
     <span style="font-size: 36%;" class="origin">then </span>
     <span style="font-size: 32%;" class="origin">back </span>
     <span style="font-size: 28%;" class="origin">to </span>
     <span style="font-size: 24%;" class="origin">Denmark... </span>

     <p style="margin-left: 4.8%;" class="left">what some would call a "citizen of the world."</p>
     <p style="margin-left: 23%; margin-top: 1.7%;" class="white left"><span class="brackets">[</span> I live in Copenhagen and this is how I roll <span class="brackets">]</span></p>
  </div>
</div>

CSS：

body {
    font-family: arial, Verdana, Geneva, sans-serif;
    margin: 0 auto;
}
div#basicsContainer {
    text-align: center;
    background: white;
    // #f7f5e9 #f7f8f4 border-bottom: 1px solid $darkestGreen;
    padding-bottom: 1.2em;
    white-space: nowrap;
    background-image: url("../images/pattern1.png");
    box-shadow: 0 2px 6px 1px #797979;
}
div#basics {
    font-family:"Times New Roman", Georgia, Serif;
    text-transform: uppercase;
    font-size: 110%;
    line-height: 130%;
    display: inline-block;
    color: $lightGreen;
    text-shadow: -1px 1px 3px #303a22, 1px 1px 0px rgba(0, 0, 0, 0.2);
    border: 1px solid red;
}
p.left {
    text-align: left;
}
span.origin {
    text-decoration: line-through;
}
span.brackets {
    font-size: 135%;
}

JAVASCRIPT：

var fontResizeDynamic = function () {

    percentageB = viewWidthPx / basics_width;

    if (basics_width > viewWidthPx) {
        basics.style.fontSize = (basics_fontSize * percentageB) + 'px';

    } else {
        basics.style.fontSize = 110 + '%';
    }

};

window.onload = function () {

    viewWidthPx = document.body.clientWidth;

    basics = document.getElementById('basics');
    basics_fontSize = parseFloat(window.getComputedStyle(basics, null).getPropertyValue('font-size'));
    basics_width = parseFloat(window.getComputedStyle(basics, null).getPropertyValue('width'));

    fontResizeDynamic();

};

window.onresize = function () {

    fontResizeDynamic();

};

当视口的宽度小于div的宽度时，调整div内的文本大小 - 即保持div比视口宽

0 个答案: