Google Chrome 中的最小字体大小

Question

我现在正在尝试创建响应式网页，但是在使用Google Chrome查看这些页面时，出现字体大小问题，任何小于12px的字体大小都会在 Google Chrome 上显示为 12px。我试过“-webkit-transform:scale (X value,Y value);”但是效果不是我所期望的，看起来文本被处理为一个块，并且这个块的 "text size" 通过设置 x 和 y 值进行了调整，这实际上给了我一个非常奇怪的结果.... .. 有没有人有什么好主意或解决方案？非常感谢！

维克多

Answer 1

我建议你不要用PX作为font-size的单位，你可以用视口值代替。

如果您想要一个真正响应迅速的网站，您可能最好使用其他相关措施，例如：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 might be usefull to you to make a choice! :) and this one 是该信息的来源

Google Chrome 中的最小字体大小

Smallest Font-size in Google Chrome

frontend

webpage

google-chrome

font-size