窗口大小改变时调整标题大小

Question

我目前在一个网站上工作，我需要放置一些图像，一些标题和描述将随之而来。如果浏览器是全屏的，标题会出现在一行中;但是，如果浏览器宽度减小，标题会自动显示在两行上。

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

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

我想这样做，以便在浏览器宽度减小时减少标题的大小，并且想知道如何做到这一点。我无法在Google上找到任何有用的资源，或者我可能不会使用正确的关键字进行搜索。

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

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

Answer 2

Bootstraps使用css媒体查询来做到这一点。 以下是bootstrap的文档：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”应替换为标题
的标记
• 你应该检查你的目标是正确的最小宽度。