Html 当浏览器更改大小时'；挤压'；降低文本大小

我想知道的是，当我改变浏览器的大小时，是否有可能使文本大小减小

我这样做的原因是，我正在用纯CSS创建一个菜单栏，当页面被压缩时，当前所有文本都相互重叠，我希望在浏览器为100%18px时，文本大小为100%，压缩时，我希望文本减小到12px

希望它只是一个简单的一行CSS代码，允许我这样做，我不确定，所以任何帮助将被感谢

---

谢谢您的帮助

您需要设置媒体查询

媒体查询允许您根据页面的呈现方式定义CSS规则。因此，假设当窗口小于1024px时，页面会断开

.myClass { 

    //Default rules for .myClass

    font-size:18px;
  }

@media (max-width: 1024px) { 
    // The rules in here only apply if the window is less than/equal to 1024px
    // So we'll drop the font size so that it fits the smaller screen

  .myClass {
    font-size:12px;
  }
}

---

我做了一个JSFIDLE，媒体查询将宽度从“结果”帧的宽度中减去，因此将其滑动以使其更宽/更窄，以了解其工作原理。

始终建议对容器使用

%

。您无需在这方面投入更多精力，只需应用

%

而不是

px

。 示例：-

<div style="widht:100%;height:40%;">
    <div>
      <font size="20px">Hi Mate</font>
    </div>
 <div>
      <font size="20px">How are you</font>
    </div>
</div>

嗨，伙计
你好吗

这里外部的

是容器，它应该在

%

中。它为我工作，我设计了超过5个网站。文本大小将随相应浏览器自动更改

希望它能帮助你