根據屏幕寬度調整字體大小

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