Question

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

我这样做的原因是我在纯CSS中创建菜单栏，当页面被挤压时，当前所有文本都相互重叠，我想在浏览器为100％18px时制作文本大小它被挤压了我希望文本减少到12px。

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

感谢您的帮助

Answer 1

您需要设置媒体查询。

媒体查询允许您根据呈现页面的方式定义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;
  }
}

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

Answer 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个网站。文本大小将随各自的浏览器自动更改。

希望它会对你有所帮助。

当浏览器改变大小“挤压”时，文本大小会降低

2 个答案: