我正在创建一个基于网络的应用程序，将在电视和其他大型显示器上显示。我想要一种快速简便的方法来增加字体大小以适应窗口大小。文字是动态的。
任何帮助是极大的赞赏。 ;）
如果您对/能够使用CSS3感兴趣，那么就有一个纯CSS解决方案 - 媒体查询>> http://www.w3.org/TR/css3-mediaqueries/
例如，CSS：
@media screen and (min-device-width: 800px) { ... }
...允许您在800px或更高屏幕上显示时为页面指定不同的样式。显然你可以随心所欲地改变它 - 强大的东西
您可能还想在此链接的末尾考虑预先编写的javascript ... http://www.themaninblue.com/experiment/ResolutionLayout/#
好的 - 对于初学者，您应该使用Ems进行尽可能多的测量，就像在UI中一样。至少，使用Ems（而不是像素或％）来调整所有文本元素的大小。如果可能，在Ems中设置布局块的宽度将有助于应用程序按比例缩放。如果您可以在Ems中设置所有维度，那么整个应用程序将在视觉上可扩展。
Ems的关键在于它们的大小相对于其父元素的字体大小 - 这意味着您可以通过调整body元素的字体大小来调整所有文本的大小（因为所有内容都相对于身体）。
最后一步是使用一段javascript来检测视口的宽度，并相应地设置主体的字体大小。根据您希望控制比例的细粒度，您可以使用body元素上的类来设置一组预定义的值，也可以直接操作font-size本身。如果可能的话，我倾向于使用预先确定的尺寸来使测试更容易。
我使用javascript库来更容易地检测视口宽度 - 在不同的浏览器中它是众所周知的不同。使用jQuery，代码可能如下所示：
$(function(){
var viewPortWidth = $(window).width();
if (viewPortWidth > 1900) {$('body').addClass('extraWide')}
else if (viewPortWidth > 1400) {$('body').addClass('wide')}
else if (viewPortWidth > 1000) {$('body').addClass('standard')}
else if (viewPortWidth > 700) {$('body').addClass('narrow')}
else {$('body').addClass('extraNarrow')}
});
而CSS：
<style type="text/css">
body {font-size:62.5%;} /* Set the size of 1em to 10px in all browsers */
body.extraWide {font-size:85%;}
body.wide {font-size:75%;}
body.narrow {font-size:50%;}
body.extraNarrow {font-size:40%;}
</style>
当然，您可以调整这些值，并且可以根据需要设置多个分区。这是一个快速而又肮脏的解决方案，但应该做到这一点。
注意 - 显示的javascript代码只会在页面加载时设置一次 - 当您更改窗口大小时，它不会调整它。这是一个可能的补充，但在开始追踪这条赛道之前还有更大的考虑因素。就个人而言，我甚至考虑在cookie中设置比例值，以保持用户在整个会话期间的体验一致，而不是在每个页面加载时重新缩放。
japanFour提供的解决方案的更好版本（对我来说）：
$(document).ready(scaleFont);
$(window).resize(scaleFont);
function scaleFont() {
var viewPortWidth = $(window).width();
if (viewPortWidth >= 1900) {$('body').attr('class','extraWide');}
else if (viewPortWidth >= 1400) {$('body').attr('class','wide');}
else if (viewPortWidth >= 1000) {$('body').attr('class','');}
else if (viewPortWidth >= 700) {$('body').attr('class','narrow');}
else {$('body').attr('class','extraNarrow');}
}
因此，只有在调整窗口大小（避免使用setTimout）时才调整大小，并且只给body它所需的确切类
我在一个相当古老的问题中知道这一点，但无论如何我都会回答，因为这是一个可以被大量搜索的问题。
实际上除了Media Queries之外还有另一种方法，它也是纯CSS：
视口单位：vw，vh，vmin，vmax。
这些长度单位表示视口宽度（vw），高度（vh）的视口大小的1％，两者中的较小者（vmin）或两者中的较大者（vmax）。
例如，您可以使用：
CSS：
body {
font-size:5vmin;
}
这会将整个文档的字体大小设置为最小视口大小（宽度或高度）的5％。因此，例如在iPad（1024 x 768 px）上，font-size将是38,4 px（768 px的5％，因为这是视口尺寸的最小尺寸）。
Beejamin的答案按预期工作，我添加了一个设置超时，因此它会实时扩展。但它并没有扭转规模。
$(document).ready(function() {scaleFont();});
function scaleFont() {
var viewPortWidth = $(window).width();
if (viewPortWidth > 1900) {$('body').addClass('extraWide')}
else if (viewPortWidth > 1400) {$('body').addClass('wide')}
else if (viewPortWidth > 1000) {$('body').addClass('standard')}
else if (viewPortWidth > 700) {$('body').addClass('narrow')}
else {$('body').addClass('extraNarrow')}
setTimeout(scaleFont, 100);
}
编辑：解决逆转效应
$(document).ready(function() {scaleFont();});
function scaleFont() {
var viewPortWidth = $(window).width();
if (viewPortWidth >= 1900) {$('body').addClass('extraWide').removeClass('wide, standard, narrow, extraNarrow')}
else if (viewPortWidth >= 1400) {$('body').addClass('wide').removeClass('extraWide, standard, narrow, extraNarrow')}
else if (viewPortWidth >= 1000) {$('body').addClass('standard').removeClass('extraWide, wide, narrow, extraNarrow')}
else if (viewPortWidth >= 700) {$('body').addClass('narrow').removeClass('extraWide, standard, wide, extraNarrow')}
else {$('body').addClass('extraNarrow').removeClass('extraWide, standard, wide, narrow')}
setTimeout(scaleFont, 100);
}
这将是我的方法（删除实际的类+ Drupal 7 jQuery）：
(function ($) {
$(document).ready(function() {
var bodyClassArr = new Array('extraWide', 'wide', 'normal', 'narrow', 'extraNarrow', 'mobile');
function setBodyClass(){
// remove previous classes
for(x in bodyClassArr){
if($('body').hasClass(bodyClassArr[x])){ $('body').removeClass(bodyClassArr[x]); }
}
var viewPortWidth = $(window).width();
if (viewPortWidth > 1900) { $('body').addClass('extraWide'); }
else if (viewPortWidth > 1400) { $('body').addClass('wide'); }
else if (viewPortWidth > 1000) { $('body').addClass('normal'); }
else if (viewPortWidth > 700) { $('body').addClass('narrow'); }
else if (viewPortWidth < 700) { $('body').addClass('mobile'); }
else { $('body').addClass('normal'); }
};
setBodyClass();
$(window).resize(function() { setBodyClass(); });
}); // jquery end
}(jQuery));
以下代码有什么问题吗？虽然我同意媒体查询非常有用，但我想在窗口增长或缩小时不断缩放页面某些元素的字体大小。这个代码似乎比基于视口像素宽度建立类常量的其他jquery解决方案简单得多：
$(document).ready(function() {
var setFontSize = function() {
var viewportWidth = $(window).width();
var fontSize = Math.sqrt(viewportWidth/250);
$('.myElement').css('font-size',fontSize+'em');
};
$(window).resize(function() {
setFontSize();
});
setFontSize();
});
这是一个更简单，没有jquery的解决方案：
onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}