如何获取我的页眉使用响应布局调整大小？ [英] How can I get my page headers to resize using responsive layout?

问题描述

所以我有一个网站，我需要在移动设备和计算机上运行。我使用bootstrap响应，并得到了很多东西工作。目前我正在为首页的英雄单位。我有一个页眉，我想根据屏幕尺寸自动缩放。主引导站点（http://twitter.github.com/bootstrap/）使用的东西，像我想要做的主页头。

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.

相关代码：

<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/
如果您在该网页上调整窗口大小，标题会相应调整大小。我尝试查看源代码，我很难找到它。

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.

推荐答案

好吧，我想一个。为了将来参考，使用 @media（max-width：）属性来完成。例如，您可以这样做：

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: 480px) {
  h1 {
    font-size: 12pt;
  }
}

希望这有助于未来的人！干杯！

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

这篇关于如何获取我的页眉使用响应布局调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！