如何让我的页眉使用响应式布局调整大小？答案

【问题标题】：How can I get my page headers to resize using responsive layout?如何让我的页眉使用响应式布局调整大小？
【发布时间】：2015-05-26 11:57:19
【问题描述】：

所以我有一个网站，我需要在移动设备和计算机上都可以正常工作。我正在使用引导响应，并且已经完成了很多工作。目前我正在为首页制作英雄单位。我有一个页眉，我想根据屏幕大小自动缩放。主引导站点 (http://twitter.github.com/bootstrap/) 使用了类似于我想要对其主页标题执行的操作。任何帮助表示赞赏。

相关代码：

<div class="container">
        <div class="hero-unit">
            <div class="page-header">
                <h1>Page Header</h1>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu dolor, dictum scelerisque gravida nec, vulputate in odio. Pellentesque sagittis ipsum et mauris elementum vitae molestie ipsum blandit. Mauris tempus hendrerit arcu, sed vestibulum justo tempor a. Praesent sit amet odio ligula. Morbi sit amet leo vestibulum neque bibendum ullamcorper sed ut ante. Vestibulum id diam quis ipsum aliquet vestibulum. Donec vulputate auctor pharetra.</p>
            <a href="#" class="btn btn-large btn-primary">Learn More</a>
        </div>
    </div>

编辑：这是另一个例子。 http://www.screenlight.tv/ 如果您在该页面上调整窗口大小，则标题会相应调整大小。我已经尝试查看源代码，但我很难找到它。

【问题讨论】：

贴一些相关代码让我们看看。
您是否将响应式 CSS 添加到您的页面？它不包含在默认 CSS 中。
是的，我有。其他响应功能正在运行。这绝对是引导响应的一部分吗？

标签： css twitter-bootstrap

【解决方案1】：

好的，我已经想通了。为了将来参考，这是使用@media(max-width: ) 属性完成的。例如，你会这样做：

@media(max-width: 480px) {
  h1 {
    font-size: 12pt;
  }
}

或者你需要做的任何事情。希望这对将来的人有所帮助！干杯！

【讨论】：

【解决方案2】：

如果是图片标题照片（不涉及文字），使用 `class="img-responsive" 也可以。即：

<div class="container-fluid">
 <div class="row">
 <img src="/images/sample_photo.jpg" class="img-responsive">
 </div>
</div>

此处的实时示例：http://www.bootply.com/Cc0rdXsJXP

【讨论】：

【解决方案3】：

你试过换成

  <div class="container-fluid">

【讨论】：

是的，抱歉，它应该是容器流体。我复制了他们的 bootstrap 样式表，它本质上是将 bootstrap.css 和 bootstrap-responsive.css 混合到一个文件中并尝试了它并且它可以工作，但我仍然不明白为什么我的不起作用。
你有没有碰巧有这个在线我们可以看看的地方？

【解决方案4】：

如 here 所述，bootstrap 目前不支持开箱即用的响应式字体大小。已经显示的@media(max-width: ) 是要走的路。

【讨论】：

请解释您所说的“已经显示的......”和/或添加更多代码来演示解决方案。