CSS/Javascript fluid font size

问题:

My application has two views, a live mode and a preview mode. Both of these have windows which can be resized. They are the same html file. I am looking for a way to get the font-size to resize proportionally for both views when they are resized. I am using jQuery as my javascript framework. Is there a way of getting this to work in either CSS or jQuery?

回答1:

I know I am answering my own question, but the answer above was helpful but not enough to suffice as one. So this is how I ended up doing it.

First I set up this function which calculates a suitable font size based on a given width.

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

Then I got the function to run on load and on re size of the window then modify the body font size accordingly.

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

All you have to do from there is set up any element to have its font-size re-sizable by giving it an "em" or percentage font size.

回答2:

Sure, define a javascript object which has a function that takes in a width and height parameter. It should return your desired font size based on that width and height. Then, attach a resize event handler to your window, which calls that function you just defined and sets the font-size css property on the document body of the window.

You must use this plugin to get a resize event on an html element that is not the window: 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);
     }
});