Wie Responsive Schriftgröße zu erstellen

Question

Ich versuche, etwas Text auf meine Diashow zu legen und die Größe der Schriftart reagieren zu lassen. Ich fand diese Frage:

How to create responsive text on top of an image?

, die ziemlich ähnlich ist, was ich versuche zu erreichen. Ich habe daran gearbeitet und die Prozentwerte für Schriftgröße und Zeilenhöhe verwendet, aber es scheint nichts zu tun zu haben. Bisher sieht mein Code wie folgt aus:

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

Es gibt andere HTML-Elemente und CSS und JS Sachen auf dieser Seite geht so vielleicht wird etwas, das mit Schriften zu tun hat, von irgendwo anders geerbt, oder vielleicht habe ich einfach keine Ahnung, was ich mache. In jedem Fall ist es vielleicht am einfachsten, diese Seite http://www.enviroptics.com/envirocam.html anzusehen und die Größe des Fensters zu ändern, um zu sehen, was passiert.

Answer 1

Verwenden Sie keine Pixel für Ihre Schriftgröße. Versuchen Sie em, rem oder% basierte Werte anstelle von Pixeln.

Sie können auch diesen Link verweisen https://www.sitepoint.com/understanding-responsive-web-design-how-to-manage-fonts/

Answer 2

Hier ist eine Hilfsfunktion I für Situationen wie diese in der Vergangenheit verwendet haben. Ich hoffe, dass jQuery Ihnen die Zahlen liefert, die Sie benötigen, damit es funktioniert! Auf diese Weise können Sie Schriftgrößen in Rems festlegen (was bedeutet, dass sie auf der HTML-Schriftgröße basieren) und dann die Schriftart des HTML-Elements ändern, wenn Sie die Größe Ihres Bildschirms ändern. ScreenWidth kann entweder die Breite Ihres Browserfensters oder die Breite des Elements mit Ihrem Inhalt sein.

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 
}