根据屏幕宽度调整字体大小

Question

如果屏幕宽度小于1100像素，有人可以通过JavaScript代码帮助我调整div中字体的大小吗？

if (window.screen.width <= 1100) {
  var item = document.getElementById("div1");
  item.style.fontSize = "25px";
  item.innerHTML = "String";
}

到目前为止，这就是我所拥有的。 有人可以帮我下一步做什么吗？

Answer 1

您的代码在JS Fiddle中对我有用。 也许您没有为您的div或类似名称指定正确的ID。

http://jsfiddle.net/trott/GqFPY/

如果希望代码在浏览器调整大小时被触发，则需要将其绑定到事件。 （请参阅迈克尔的回答。）

Answer 2

您将需要将动作绑定到window.onresize事件：

var resizeFonts = function() {
  var item = document.getElementById("div1");
  if (window.screen.width <= 1100) {
      item.style.fontSize = "25px";
      item.innerHTML = "String";
  }
  // Otherwise set a larger font
  else item.style.fontSize = "30px";
};

window.onload = resizeFonts;
window.onresize = resizeFonts;

Answer 3

我在一个老博客中发布了有关更改字体大小的信息，但这是为了说明如何使用jQueryUI滑块。 也许您可以使用其中的一些逻辑来创建自己的解决方案：

http://weblogs.asp.net/thiagosantos/archive/2009/03/21/my-first-time-with-jquery-ui.aspx