Question

所以我有一个网站，我需要在移动设备和计算机上运行。我正在使用bootstrap-responsive并且已经有很多工作要做。目前我正在为首页制作英雄单元。我有一个页面标题，我想根据屏幕大小自动缩放。主引导站点（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/ 如果您在该页面上调整窗口大小，则标题会相应调整大小。我已经尝试过查看源代码，但我很难找到它。

Answer 1

好的，我已经想到了这一个。为了将来参考，使用@media(max-width: )属性完成此操作。例如，您可以这样做：

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

或者你需要做什么。希望这有助于未来的人！干杯！

Answer 2

如果它是图像标题照片（不涉及文字），则使用`class =＆＃34; img-responsive＆＃34;同样有效。即：

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

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

Answer 3

您是否尝试过将其切换为

  <div class="container-fluid">

Answer 4

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

如何使用响应式布局调整页面标题大小？

4 个答案: