CSS/Javascript流体字体大小

Question

我的应用程序有两种视图，即实时模式和预览模式。这两个窗口都可以调整大小。它们是相同的html文件。我正在寻找一种方法来调整字体大小，以便在调整大小时调整两个视图的比例。 我使用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对象，它具有一个函数，它需要一个宽度和高度参数。它应该根据该宽度和高度返回所需的字体大小。然后，将一个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); 
    } 
});