窗口大小更改时调整标题大小答案

【问题标题】：Resizing Headings when Window Size Changes窗口大小更改时调整标题大小
【发布时间】：2013-09-17 00:21:31
【问题描述】：

我目前正在开发一个网站，我需要在该网站上放置一些图片，并附上一些标题和描述。如果浏览器是全屏的，则标题显示在单行上；但是，如果减小浏览器宽度，标题会自动显示为两行。

以下是浏览器全屏时的外观：

以下是浏览器宽度减小时的外观：

我想让它在浏览器宽度减小时减小标题的大小，我想知道我该怎么做。我无法在 Google 上找到任何好的资源，或者我可能没有使用正确的关键字进行搜索。

我正在使用 Ruby on Rails 和 Bootstrap (2.3.2) 开发网站。我也在使用 SASS 和 jQuery，但我是新手。

【问题讨论】：

能否将容器类设为“container-fluid”，将行类设为“row-fluid”
我已经使用了 row-fluid，它可以适当地调整所有元素。但是，它不会调整标题的大小。

标签： html css ruby-on-rails twitter-bootstrap web

【解决方案1】：

您可以使用 css @media 运算符：

h1 {
    font-size: 30px;
}

@media screen and (max-device-width : 400px)
{
  h1
  {
    font-size:20px;
  }
}

@media screen and (min-device-width : 600px)
{
  h1, div, etc
  {
    /* any css rules */
  }
}

另请查看有用资源：
auto resize text (font size) when resizing window?
http://alistapart.com/article/responsive-web-design
http://www.w3.org/TR/css3-mediaqueries/

【讨论】：

像魅力一样工作。谢谢！

【解决方案2】：

Bootstrap 使用 css 媒体查询来做到这一点。这是来自引导程序的文档：http://getbootstrap.com/css/#grid-media-queries 这是媒体查询速成课程：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-a-crash-course-in-css-media-queries/

要实现你想要的，你需要在你的 application.css.scss 中写这样的东西：

@media (min-width: @screen-md) {
  h1{font-size: 14px}
}

“h1”应该替换为标题的标签
您应该检查您的目标是正确的最小宽度。

【讨论】：

感谢您的回答！