Question

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

Answer 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”或百分比字体大小来重新调整字体大小。

Answer 2

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

您必须使用此插件才能在不是窗口的html元素上获取resize事件：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);
     }
});

CSS / Javascript流体字体大小

2 个答案: