CSS 如何使用响应式布局调整页眉大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9651467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get my page headers to resize using responsive layout?
提问by Willem Ellis
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.
所以我有一个网站，我需要在移动设备和计算机上都能正常运行。我正在使用 bootstrap-responsive 并且已经完成了很多工作。目前我正在为首页制作英雄单元。我有一个页眉，我想根据屏幕大小自动缩放。主引导站点 (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/如果您在该页面上调整窗口大小，标题也会相应调整大小。我试过查看源代码，但很难找到它。
回答by Willem Ellis
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!
或者你需要做的任何事情。希望这对未来的人有所帮助！干杯!
回答by SM23
If it's an image header photo (no text involved), using `class="img-responsive" as well works. I.e:
如果它是图像标题照片（不涉及文本），则使用 `class="img-responsive" 也可以。IE：
<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
回答by Jayson Lane
Have you tried switching it to
你有没有试过把它切换到
<div class="container-fluid">
