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); 
    } 
});