Как создать отзывчивый размер шрифта

Question

Я пытаюсь поместить некоторый текст в мое слайд-шоу и иметь размер шрифта. Я нашел этот вопрос:

How to create responsive text on top of an image?

, которая очень похожа на то, что я пытаюсь сделать. Я работаю над этим и использую проценты размера шрифта и высоты строки, но, похоже, он ничего не делает. До сих пор мой код выглядит следующим образом:

HTML:

<div> 
<div> 
    <div class="ec_slideshow"> 
    <ul class="bxslider"> <!--slideshow that I found on the interwebz--> 
    <li><div class="ec_slidecontainer"> 
    <img src="http://enviroptics.com/Matt/Transparent%20photos%20in%20progress/Vision_System_Flow_Cell_1200x400.png" alt=""/> 

    <!--This is the text that I want to be responsive--> 
    <h2 class="ec_slidecontent"><span>Bubble Analysis<br/>Possible Subtext</span></h2> 
    <!--End of text that I want to be responsive--> 

    </div></li> 
    </ul> 

CSS:

.ec_slideshow { 
    width: auto; 
    max-width: 1200px; 
    height: auto; 
    border: 2px solid black; 
    /*background-color: cyan;*/ 
    text-align: center; 
    font-size: 20px; 
    margin: 20px auto 0px auto; 
    padding-bottom: 0px; 
    z-index: 1 !important; 
    } 

    .ec_slidecontent span { 
    position: absolute !important; 
    top:   0px; 
    left:  30%; 
    font-family: 'roboto' !important; 
    font-size: 100% !important; 
    color:  #fff !important; 
    padding:  3px 10px !important; 
    width:  40% !important; 
    line-height: 100% !important; 
    background: rgb(0, 0, 0); 
    background: rgba(0, 0, 0, 0.7); 
    } 

    .ec_slidecontent { 
    margin: 0px !important; 
    padding: 0px !important; 


    .ec_slidecontainer img { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
    } 

Есть и другие элементы HTML и CSS и JS вещи, происходящие в этой странице, возможно, что-то связанное с шрифтом унаследовано откуда-то еще, или, может быть, я просто не знаю, что я делаю. В любом случае, проще всего просмотреть эту страницу http://www.enviroptics.com/envirocam.html и изменить размер окна, чтобы узнать, что происходит.

Answer 1

Не используйте пиксели для размера шрифта. Попробуйте em, rem или% на основе значений вместо пикселей.

Вы можете также обратиться по этой ссылке https://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/

Answer 2

Вот функция помощника я использовал в прошлом для подобных ситуаций. Надеюсь, что jQuery может получить вам номера, необходимые для его работы! Это позволяет вам устанавливать размеры шрифта в ремах (что означает, что он основан на размере шрифта html), а затем изменить шрифт элемента html при изменении размера экрана. ScreenWidth может быть либо шириной вашего окна браузера, либо шириной элемента, содержащего ваш контент.

function getFontSize(screenWidth) { 
    "use strict"; 
    var fontSize = 10, // this is the base font size. All other sizes are computed based on this number 
     maxWidth = 1024, // max size of content on a page 
     minSize = 5;  // smallest base font size allowed 

    if (screenWidth < maxWidth) { 
     // font size is computed by the ratio of screenWidth to maxWidth 
     fontSize = Math.max((screenWidth/maxWidth) * fontSize, minSize); 
    } 

    return fontSize; //font-size is then applied to the html element of your page 
}