CSS/Javascript 流体字体大小答案

【问题标题】：CSS/Javascript fluid font sizeCSS/Javascript 流体字体大小
【发布时间】：2011-05-26 23:01:11
【问题描述】：

我的应用程序有两个视图，一个实时模式和一个预览模式。这两个都有可以调整大小的窗口。它们是相同的 html 文件。我正在寻找一种方法来让字体大小在调整大小时为两个视图按比例调整大小。我使用 jQuery 作为我的 javascript 框架。有没有办法让它在 CSS 或 jQuery 中工作？

【问题讨论】：

标签： javascript jquery css font-size

【解决方案1】：

我知道我正在回答我自己的问题，但上面的答案很有帮助，但不足以作为一个答案。所以这就是我最终这样做的方式。

首先我设置了这个函数，它根据给定的宽度计算合适的字体大小。

function getFontSize(width){
    sizew = width / 100;
    size = sizew * 1.5;
    return size;
};

然后我得到了在加载和重新调整窗口大小时运行的函数，然后相应地修改正文字体大小。

$(window).resize(function(){
    size = getFontSize($(this).width());
    $("body").css("font-size", size + "px");
}).resize();

你所要做的就是设置任何元素，通过给它一个“em”或百分比字体大小来调整其字体大小。

【讨论】：

必须删除上面代码中" px" 中的空间才能使其工作

【解决方案2】：

当然，定义一个 javascript 对象，该对象具有一个接收宽度和高度参数的函数。它应该根据该宽度和高度返回您想要的字体大小。然后，将 resize 事件处理程序附加到您的窗口，它会调用您刚刚定义的函数并在窗口的文档正文上设置 font-size css 属性。

您必须使用此插件来获取非窗口的 html 元素上的调整大小事件：http://benalman.com/projects/jquery-resize-plugin/

var fontsize = function FontSizeBasedOnDimensions{
      var that = {};
      that.GetFontSize = function(height, width){
             //Make some decisions here
      }    
      return that;
}();

$('#yourwindow').resize(function(){
     var size = fontsize.GetFontSize($(this).css('height'), $(this).css('width'));
     var currentsize = parseInt($(this).css('font-size'),10);
     if(size != currentsize){
           $(this).css('font-size', size);
     }
});

【讨论】：