Question

我在我的文字中使用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

基本上，文本比例（16像素）和EM字体大小始终是1em（它们总是相同），但是，这里唯一改变的是窗口大小调整Text Percentage。但是字体大小总是1em而文本比率总是= 16（如16像素，这是body.css("font-size")值。在某个公式中必须有某种缺陷来计算它。

jQuery调整文本到窗口

0 个答案: