Question

我正在学习如何首次使用引导程序和媒体查询。当屏幕变小时，我试图让一些文本变小，但由于某种原因我不确定为什么bootstrap不这样做，这是否意味着我需要使用媒体查询？或者在bootstrap中有功能吗？

HTML：

  <div class = "Logo">
  <a class="navbar-brand" href="#">
      <h1>Hello</h1>
      <h2>There</h2>
      <h3>You</h3><br/>
    <p>Time To make a change</p>
  </a>  
 </div>

CSS：

@media (max-width: 480px) {

      .Logo {
        Float : left; 
        height : 20px;
        width: 70px; 
      }

}

我想要它，以便当有人在iphone等中启动它时，导航栏中的文本将缩小并变小，但由于某种原因它不会这样做。

再次感谢所有帮助，对不起，如果这是一个基本问题，只是想了解bootstrap等:)

Answer 1

我认为你可以使用：

@media (max-width: 480px) { .Logo { Float : left; height : 20px; width: 70px; } Logo.h1 { font-size: 80%; } Logo.h2 { font-size: 80%; } Logo.h3 { font-size: 80%; } }

这将使其达到原始尺寸的80％。

来源：W3schools

Answer 2

您只需在html中添加“viewport”元标记即可解决您的问题。

log_errors = off

此元标记会根据当前正在查看网页的设备尺寸来缩放整个内容。您可以找到有关此标记here的更多信息。

Bootstrap / media查询使文本变小

2 个答案: