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

So I have a site that I need to be functional both on mobile devices and on computers. I'm using bootstrap-responsive and have gotten a lot of things to work. Currently I'm working on the hero-unit for the front page. I have a page header that I would like to auto-scale according to screen size. The main bootstrap site (http://twitter.github.com/bootstrap/) makes use of something like what I want to do with their main page header. Any help is appreciated.

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

Relevant Code:

<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>

EDIT: Here's another example of it. http://www.screenlight.tv/ If you resize your window on that page, the header resizes accordingly. I've tried looking at the source and I'm having a hard time finding it.

编辑:这是另一个例子。 http://www.screenlight.tv/如果您在该页面上调整窗口大小,标题会相应调整大小。我试过看源,我很难找到它。

4 个解决方案

#1

Okay I've figured this one out. For future reference, this is done using the @media(max-width: ) property. So for instance, you would do:

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

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

Or whatever you need to do. Hope this helps someone in the future! Cheers!

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

#2

If it's an image header photo (no text involved), using `class="img-responsive" as well works. I.e:

如果它是图像标题照片(不涉及文本),使用`class =“img-responsive”也可以。即:

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

Live sample here: http://www.bootply.com/Cc0rdXsJXP

现场样本:http://www.bootply.com/Cc0rdXsJXP

#3

Have you tried switching it to

你试过切换它吗?

  <div class="container-fluid">

#4

As noted here, bootstrap doesn't currently support responsive font size out of the box. The already shown @media(max-width: ) is the way to go.

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

#1