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

所以我有一个网站，我需要在移动设备和电脑上都能正常工作。我使用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/ 如果您在该页面上调整窗口大小，则表头会相应调整大小。我尝试过看看源代码，而且我很难找到它。

来源

2012-03-11 Willem Ellis

发布一些相关的代码，所以我们可以来看看。 – 2012-03-11 00:46:38

好吧，我发布了一些 – 2012-03-11 00:53:03

Dd，您将响应式CSS添加到您的页面？它不包含在默认的CSS中。 – coreyward 2012-03-11 01:05:29

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

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

或者你需要做的任何事情。希望这有助于未来的人！干杯!

来源

2012-03-11 01:51:48

你试过它切换到

<div class="container-fluid">

来源

2012-03-11 01:19:14

对不起，它应该是容器流体。我复制了自己的bootstrap样式表，它本质上是bootstrap.css和bootstrap-responsive.css，它们被嵌入到一个文件中，然后尝试它并且可以正常工作，但我仍然不明白为什么我的工作不起作用。 – 2012-03-11 01:23:13

你有没有在这个网上有我们可以去看看？ – 2012-03-11 01:31:31

如注意到here，引导程序当前不支持响应字体大小。已经显示的@media(max-width:)是要走的路。

来源

2013-01-05 03:10:45 Drew

请解释您的意思是“已经显示...”和/或添加更多代码来演示解决方案。 – gfullam 2016-11-07 18:26:19

如果它是一个图片头像（不涉及文本），使用`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

来源

2015-05-26 03:57:19 SM23

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

回答

相关问题