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

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

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

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

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

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

Answer 1

你可以用css @media operator来做到这一点：

 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 */ } } 

还要检查有用的资源：
调整窗口大小时自动调整文本大小（字体大小）？
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/快速尖-A-速成classfunction于CSS媒体查询/

要实现您想要的，您需要在application.css.scss中编写类似的内容：

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

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