Ausgabe automatisch Ändern der Größe Haupt-Titeltext

Question

ich eine Beratung Website bin Aktualisierung, die auf Squarespace gehostet wird, und ich bin mit Sizing Fragen mit dem Titel (es reagiert nicht Größe Browser)

Here is the link to the webpage

Wenn Sie Ändern Sie die Größe der Seite. Das Wort "eCommerce" passt sich nicht an den Bildschirm an.

ich versucht habe, in einige benutzerdefinierte CSS-Zugabe, aber es ist nicht gut

@media screen 
and (min-device-width: 751px) 
and (max-device-width: 1110px) 
{ 
    #introduction .sqs-block-content h1{ 
    font-size:100px; 
} 
} 
@media screen 
and (max-device-width: 750px) 
{ 
#introduction .sqs-block-content h1{ 
font-size:100px; 
} 
} 

Arbeit ich seit dem Codeform der Website entfernt haben.

Habt ihr eine Idee, wie ich den Haupttext basierend auf der Größe des Browsers mit CSS skalieren kann?

Answer 1

Ich denke, Sie waren auf dem richtigen Weg, aber aus irgendeinem Grund entschieden, *-device-width anstelle von nur *-width zu verwenden. Ich bin mir ziemlich sicher, dass sich die Gerätebreite auf die gesamte Bildschirmgröße bezieht, während die Breite sich nur auf die Größe des Browser-Darstellungsbereichs bezieht. Versuchen Sie folgendes:

@media screen and (min-width: 751px) and (max-width: 1110px) 
{ 
    #introduction .sqs-block-content h1{ font-size:100px; } 
} 

@media screen and (max-width: 750px) 
{ 
    #introduction .sqs-block-content h1{ font-size:100px; } 
} 

Answer 2

Für jemanden, der noch immer gleiche Frage hat, würde ich empfehlen fittext Plugin zu verwenden.

Nicht-jQuery Standalone-Version auch exists

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="jquery.fittext.js"></script> 
<script> 
    jQuery("#responsive_headline").fitText(); 
</script>