CSS / Javascript流体字体大小

我的应用程序有两个视图，即实时模式和预览模式。 这两个都有可以resize的窗口。 它们是相同的html文件。 我正在寻找一种方法来调整字体大小，以便在resize时对两个视图按比例resize。 我使用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); } });