谷歌浏览器中最小的字体

Question

我现在正在尝试创建响应式网页，但是在使用谷歌浏览器查看这些页面时，出现了字体大小问题，任何小于 12 像素的字体在谷歌浏览器上都会显示为 12 像素。 我试过“-webkit-transform:scale (X value,Y value);”但是效果不是我想象的那样，看起来文本是作为一个块处理的，并且这个块的“文本大小”是通过设置 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;
   }
}

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

This link 可能对您做出选择有用！ :) 和 this one 是该信息的来源