Question

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

非常感谢任何帮助。 ;）

Answer 1

如果您对 CSS3 感兴趣或能够使用 CSS3 ，那么就会有一个纯CSS解决方案 - 媒体查询＆gt;＆gt; 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

确定 - 对于初学者，您应该在UI中使用Ems进行尽可能多的测量。至少，使用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中设置比例值，以保持用户在整个会话期间的体验一致，而不是在每次加载页面时重新缩放。

Answer 3

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提供所需的确切类

Answer 4

我在一个相当古老的问题中知道这一点，但无论如何我都会回答，因为这是一个可以进行大量搜索的问题。

实际上除了媒体查询之外还有另一种方法，它也是纯CSS：

视口单元： vw，vh，vmin，vmax。

这些长度单位表示视口宽度（vw），高度（vh）的视口大小的1％，两者中的较小者（vmin）或两者中的较大者（vmax）。

例如，您可以使用：

<强> CSS：

body {
    font-size:5vmin;
}

这会将整个文档的字体大小设置为最小视口大小（宽度或高度）的5％。例如，在iPad（1024 x 768像素）上，font-size将 38,4 px （768 px的5％，因为这是任一视口尺寸的最小尺寸）。

浏览器兼容性： https://caniuse.com/#feat=viewport-units

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

Answer 6

这将是我的方法（删除实际的类+ 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));

Answer 7

以下代码有什么问题吗？虽然我同意媒体查询非常有用，但我想在窗口增长或缩小时不断缩放页面某些元素的字体大小。这个代码似乎比基于视口像素宽度建立类常量的其他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();

});

Answer 8

这是一个更简单，没有jquery的解决方案：

onresize=onload=function(){document.body.style.fontSize=window.innerWidth+"px"}

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

8 个答案: