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

Question

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

非常感谢任何帮助。 ;)

Answer 1

我知道这是一个很老的问题，但无论如何我都会回答，因为这是一个可以搜索很多的问题。

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

---

视口单位： vw、vh、vmin、vmax。

这些是长度单位，代表视口宽度 (vw)、高度 (vh)、两者中较小者 (vmin) 或两者中较大者 (vmax) 的 1%。

例如，您可以使用：

CSS：

body {
    font-size:5vmin;
}

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

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

Answer 2

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 3

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

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

这是一个更简单且无 jquery 的解决方案：

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

Answer 7

如果您有兴趣/能够使用 CSS3，那么有一个纯 CSS 解决方案 - 媒体查询 >> http://www.w3.org/TR/css3-mediaqueries/

例如，CSS：

@media screen and (min-device-width: 800px) { ... }

...允许您在 800 像素或更大的屏幕上显示页面时为页面指定不同的样式。显然你可以随心所欲地改变它 - 强大的东西

您可能还想考虑此链接末尾的预先编写的 javascript ... http://www.themaninblue.com/experiment/ResolutionLayout/#

Answer 8

好的 - 对于初学者，您应该在 UI 中使用 Ems 进行尽可能多的测量。至少，使用 Ems（而不是像素或 %'s）调整所有文本元素的大小。如果可能，在 Ems 中设置布局块的宽度也将有助于应用按比例缩放。如果您可以在 Ems 中设置所有尺寸，那么您的整个应用程序将在视觉上具有可扩展性。

Ems 的关键在于它们的大小相对于其父元素的字体大小 - 这意味着您可以通过调整 body 元素的 font-size 来按比例调整所有文本的大小（因为所有是相对于身体的）。

最后一步是使用一段 javascript 来检测 viewport 的宽度，并相应地设置 body 的 font-size。根据您想要控制比例的细粒度，您可以使用 body 元素上的类来设置一组预定义的值，或者直接操纵字体大小本身。如果可能的话，我倾向于使用预先确定的尺寸以简化测试。

我会使用一个 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 中设置比例值，以保持用户在整个会话期间的体验一致，而不是在每次页面加载时重新缩放。