Question

在CSS中，如何缩放相对于设备的字体大小？

我一直在讨论在较小的设备上切断大标题的问题，见下图：

据我所知，我可以使用CSS Media Queries为较小的设备手动设置较小的字体大小。但是，我想知道自动实现这一目标的最佳方法是什么？

我应该使用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;
  }
}

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

Answer 2

您可以做的是检查屏幕尺寸，并根据设置的=SUMIFS(D:D,A:A,G2,B:B,"<="&G3,C:C,">=" & G3)设置正确的默认font-size。相对于使用body（mdn：https://developer.mozilla.org/en-US/docs/Web/CSS/length#em）调整其他元素的大小。

明显的替代方案是为em

使用vh / vw单位

当然你也可以使用媒体查询，但我认为你试图避免这种情况......

还有一个jQuery插件试图适应父宽度的大小 - 请参阅http://fittextjs.com/

Answer 3

＆＃13;

h1 {
    font-size: 8vw;
}

/* Different Relative Length  

vw – Relative to 1% of the width of the viewport
vh – Relative to 1% of the height of the viewport
vmin – Relative to 1% of viewport’s smaller dimension
vmax – Relative to 1% of viewport’s larger dimension

*/

＆＃13;

<h1>Early Access</h1>

＆＃13;

Answer 4

px，pt，％，rem，vw等？根据您的选择，您可以根据字体大小使用不同的单位。但是你需要了解一些单位是固定大小的，有些单位依赖于其他固定单位。

了解基础知识：

px和pt总是固定的。％
％和em依赖于父元素＆＃39;大小
rem取决于根元素中定义的根大小。
vw是视口宽度，是窗口大小的百分比值，因此是vh，它与vw相同但高度相同。

因此，要解决您的问题，您可以在较大的屏幕上使用固定的字体大小，并使用vw进行小屏幕宽度。

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

4 个答案: