如何根据窗口宽度增加字体大小？

Question

我正在创建一个基于网络的应用程序,将在电视和其他大型显示器上显示.我想要一种快速简便的方法来增加字体大小以适应窗口大小.文字是动态的.

任何帮助是极大的赞赏.;)

Answer 1

如果您对CSS3感兴趣/能够使用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/#

Answer 2

好的 - 对于初学者,您应该使用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中设置比例值,以保持用户在整个会话期间的体验一致,而不是在每个页面加载时重新缩放.