Question

我想根据浏览器窗口的宽度更改font-size。

当我调整浏览器窗口大小时，字体正在调整大小，但它不会阻止font-size低于18px。

  font_size();
  function font_size(ww,wh) {
    var title = document.getElementById("title").style.fontSize;
    if (title < 18) {
      $("#title").css("font-size", 18);
    }else{
      $("#title").css("font-size", ww*0.0315);
    }
  };

我的代码有什么问题？

Answer 1

我们可以看到您的HTML吗？

DOM元素上的.style方法很可能会使用style属性而不是任何其他内部或外部CSS为您提供已添加到该元素的样式。

要解决此问题，请使用jQuery的.css()方法或浏览器内置的getComputerStyle()函数。

另一点是.style()，.css()和getComputedStyle()都返回字符串而不是数字，因此在使用任何比较运算符之前将字符串解析为数字是明智的。

if ( parseInt(title) < 18) {

这两个问题可能是原因。整理出来，看看它是否有效。

Answer 2

你不需要Javascript。 CSS可以应对挑战。

#title {
  font-size: 18px;
}

@media (min-width: 572px) {
  #title {
    font-size: 3.15vw;
  }
}

这会将#title的{{1}}设置为18px，除非视口的宽度至少为572像素。在那个大小和更宽的范围内，font-size的{{1}}是3.15% of the viewport's width.（我的控制台告诉我，572px的3.15％是18.018px，并且从那里开始增加。）

如何动态更改字体大小并添加最小字体大小？

2 个答案: