较小设备上的 CSS 字体大小缩放

Question

在 CSS 中，如何根据设备缩放字体大小？

我一直遇到大标题在较小的设备上被截断的问题，见下图:

我知道我可以使用 CSS 媒体查询为较小的设备手动设置较小的字体大小。但是，我想知道自动实现此目的的最佳方法是什么？

我应该使用 px、pt、%、rem、vw 等吗？

Answer 1

/* Tablet:768px. */
@media (min-width: 768px) and (max-width: 991px) {
 h1 {
   font-size: 26px; 
  }
}

/* Mobile :320px. */
@media (max-width: 767px) {
  h1 {
   font-size: 24px;
  }
}

您可以在响应式设备中根据需要增大或减小字体大小。