Question

这可能与css或javascript一起使用吗？所以，如果我想在某个浏览器大小的20pt字体或1em字体或类似字体，但如果浏览器窗口缩小或扩展，缩小和扩展的字体？感谢

Answer 1

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

Answer 2

我知道没有合适的css解决方案。您可以在％中定义font-size，但它将占用父元素字体的百分比。

您可以使用媒体查询，但它们会逐步变大，而不是流利。

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

Answer 3

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

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

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

Answer 4

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

body {
    font-size: 10vw;
}

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

4 个答案: