使用浏览器窗口更改 CSS 字体大小答案

【问题标题】：Changing CSS font size with browser window使用浏览器窗口更改 CSS 字体大小
【发布时间】：2011-11-14 16:58:53
【问题描述】：

这可以用 css 或 javascript 实现吗？因此，如果我想要某个浏览器大小的 20pt 字体或 1em 字体或类似字体，但如果浏览器窗口缩小或扩大，字体会缩小和扩大？谢谢

【问题讨论】：

CSS3 值和单位涵盖了基于视口的相对大小，但目前仅受 IE9 支持。 w3.org/TR/css3-values/#viewport-relative-lengths

标签： javascript css browser fonts

【解决方案1】：

您可以使用 onResize 事件来执行此操作。可以使用 jQuery 来执行此操作，例如：http://api.jquery.com/resize/。您只需对特定元素应用适当的 CSS 更改。

【讨论】：

【解决方案2】：

据我所知，没有合适的 CSS 解决方案。您可以在 % 中定义字体大小，但它会占用父元素字体像素的 %。

您可以使用媒体查询，但它们会在不流畅的步骤中变得更大。

.p {
   font-size: 20px; 
}    
@media screen and (max-width: 600px) {
  .p {
   font-size: 12px; 
  }
}
@media screen and (max-width: 800px) {
  .p {
   font-size: 14px; 
  }
}
@media screen and (max-width: 1000px) {
  .p {
   font-size: 16px; 
  }
}
@media screen and (max-width: 1200px) {
  .p {
   font-size: 18px; 
  }
}

【讨论】：

他正在尝试在调整浏览器大小时执行此操作，CSS 在这里无关，因为它无法读取/操作浏览器视口大小。

【解决方案3】：

在 css 文件中定义字体大小时，您可以使用单位 vw（视口），它会随着窗口的大小放大或缩小。示例：

body {
    font-size: 10vw;
}

【讨论】：

这就是答案。

【解决方案4】：

这是一个不依赖（非广泛支持的部分）CSS3 或 Javascript 工作的解决方案。它使用媒体查询来更改字体大小，但由于采用了SASS，它表达得简洁且非常易于使用：

http://github.com/wadim/responsive-font-size

提供四个参数，这个 mixin 将智能地为您找出正确的媒体查询定义。

【讨论】：