当浏览器改变大小时“挤压”使文本大小变小答案

【问题标题】：When the browser changes size 'squeezes' making the text size lower当浏览器改变大小时“挤压”使文本大小变小
【发布时间】：2014-02-04 01:46:55
【问题描述】：

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

我这样做的原因是我正在用纯 CSS 创建一个菜单栏，当页面当前被挤压时，所有文本相互重叠，我想在浏览器为 100% 18px 时设置文本大小它被挤压了，我希望文字减少到 12 像素。

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

感谢您的帮助

【问题讨论】：

标签： html css

【解决方案1】：

您需要设置媒体查询。

媒体查询让您可以根据页面呈现的方式定义 CSS 规则。因此，假设您的页面在窗口小于 1024 像素时会中断。

.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;
  }
}

我制作了一个 JSFiddle here. 媒体查询的宽度基于“结果”框架的宽度，因此将其滑动以使其更宽/更窄以查看其工作原理。

【讨论】：

【解决方案2】：

容器总是建议使用%。您无需为此付出更多努力，只需使用% 而不是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>

这里的外部<div> 是容器，它应该在% 中。它为我工作，我设计了超过 5 个网站。文字大小会随浏览器自动改变。

希望对你有所帮助。

【讨论】：