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

Question

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

非常感谢任何帮助。 ;)

- Josh Brown

Answer 1

如果您对使用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/#

- bochgoch

---

当窗口调整大小时，这是否有效，还是仅在加载文档时检查尺寸？ - Yuval A.

Answer 2

首先，你应该在 UI 中尽可能使用 Ems 作为度量单位。至少，将所有文本元素的大小都设置为 Ems（而不是像素或％）。如果可能，使用 Ems 设置布局块的宽度也有助于应用程序按比例进行缩放。如果可以将所有尺寸都设置为 Ems，则整个应用程序都将具有可视化可伸缩性。

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

最后一步是使用一段 JavaScript 检测视口的宽度，并相应地设置 body 的字体大小。根据您想要控制比例的精细程度，您可以在 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，以保持用户在整个会话中的一致体验，而不是在每次页面加载时重新调整比例。

- Ben Hull

---

我希望对这个答案的踩票是因为现在有更好、更现代的解决方案来解决这个问题。这并不是说这个答案是错误的，但媒体查询应该是尝试实现这种效果的第一件事情。 - Ben Hull

Answer 3

我知道这是一个比较老的问题，但我还是会回答它，因为这是一个经常被搜索的问题。

除了媒体查询，实际上还有另一种纯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

- Daan

---

这很不错。今天不得不通过艰难的方式（重构）学习到，如果您想要在不同大小的文本中使用组件，ems仍然是更好的选择。 - maracuja-juice

Answer 4

日本Four提供的解决方案针对我来说还不够好，这里提供一个更好的版本：

$(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 分配所需的确切类即可。

- David

Answer 5

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

});

- ErikAGriffin

Answer 6

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

- khollenbeck

---

这种操作设置超时时间有些过头了。为什么不使用窗口的调整大小事件呢？这样代码只需要在浏览器调整大小时执行一次即可。 - detay

Answer 7

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

- user2286309

Answer 8

这是一个更简单且不需要使用jQuery的解决方案：

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

- william malo

---

这是一个很不错的代码。我不明白为什么他们要踩它。无论如何，我试图做类似于 onresize=onload=function(){document.getElementById("post").style.fontSize=document.getElementById("icon").width+"px"}; 的事情，其中 post 是按钮的 id，icon 是一个 div。我试图根据 div 的尺寸大小来设置按钮字母的大小，但是不起作用。有什么建议吗？ - slevin