谷歌浏览器中最小的字体大小

Question

我现在正在尝试创建响应式网页，但是当使用谷歌浏览器查看这些页面时，出现了字体大小问题，任何小于 12px 的字体大小都会在谷歌浏览器上显示为 12px。我尝试过"-webkit-transform：scale（X 值，Y 值）;"，但效果不是我预期的，看起来文本被处理为一个块，并且这个块的"文本大小"是通过设置 x 和 y 值来调整的，这实际上给了我一个非常奇怪的结果......有人有什么好主意或解决方案吗？多谢！

维克多

Answer 1

我建议你不要使用PX作为字体大小的单位，你可以改用视口值。

如果你想要一个真正响应式的网站，你可能最好使用另一个相对的度量，例如：vw, vh, or %可能适合你。

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger

---

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

您甚至可以使用 CSS media说明符进行响应式样式，如下所示：

@media only screen and (max-width: 767px) {
   h1 {
      font-size: 3em;
   }
   h2 {
      font-size: 2em;
   }
}

这取决于您正在寻找的行为，如果您能解释更多您真正想要的东西，我们可以为您提供更准确的答案。

此链接可能对您做出选择有用！ :) 这就是信息的来源