0

我正在em为我的文本使用单位，但是，它似乎不起作用。在大屏幕分辨率中，文本不够宽/不足以填满屏幕，在小屏幕分辨率中，它会换行。我该如何控制这个？

基本上，如果我可以根据实际的窗口大小来控制文本的大小，那就太好了。因此，如果窗口被缩小和/或放大，文本会适应它，并且布局应该始终看起来相同（在所有浏览器屏幕宽度中）。

我怎样才能做到这一点？一直在玩 jQuery resize 事件，但不知道如何将它用于我的目的。也许有人可以让我在这里朝着正确的方向开始？

以下是执行此操作的 jsFiddle 示例：http: //jsfiddle.net/vqbCL/2/

但是，对于表格元素，我没有使用任何表格元素。尝试流畅的布局。因此，如果我可以将该技术应用于页面上所有元素的字体大小，那就太好了。

这是我在尝试执行此操作时尝试使用的代码：

jQuery(document).ready(function($){
    $(window).bind("resize", function(){
        var containerSize  = $("body").width(),
            bodyFontSize = $("body").css("font-size");
            textPercentage = parseInt(bodyFontSize.substring(0, bodyFontSize.length - 2)) / $("body").width(),
            textRatio      = containerSize * textPercentage,
            textEms        = textRatio / parseInt(bodyFontSize.substring(0, bodyFontSize.length - 2));
            alert("Text Percentage = " + textPercentage + "\nTextRatio = " + textRatio + "\nNew EM font-size = " + textEms);

        $('body').css('fontSize', textEms+'em');
    }).trigger("resize");
});

这里发生的事情是这样的：

containerSize = 974 (might be different for you depending on your browser width).
bodyFontSize = 16px
textPercentage = 16/974 = 0.01642710472279261
textRatio = 974 * 0.01642710472279261 = 16
textEm = 16 / 16 = 1em;

需要确定如何获得正确的 textRatio 并从中获得正确的 textEm。

* 更新到上面的最新代码 *

你可以看到我在这里尝试实现这个：http: //dream-portal.net/Test/index.html

基本上，Text Ratio（16 像素）和 EM Font-Size 始终为 1em（它们始终相同），然而，这里唯一改变的是Text Percentageon window resize。但是字体大小始终为 1em，文本比率始终 = 16（如 16 像素，这是body.css("font-size")值。在某处计算此值的公式中一定存在某种缺陷。

4

0 回答 0