Изменение размеров заголовков при изменении размера окна

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

бутстрапирования использовать запросы 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» следует заменить на бирку заголовка
• вы должны проверить, что вы нацелились на правильную минимальную ширину.