it-swarm.com.de

Wie verkleinere ich die Schriftgröße, wenn ich den Browser verkleinere?

Ich mache eine Website mit HTML5 und CSS. Ich versuche, diese Website ansprechbar zu machen, aber ich weiß nicht, warum die Schriftgröße unverändert bleibt, wenn ich das Browserfenster verkleinere, selbst wenn ich em oder percentages verwende, wie beispielsweise: font-size: XXem oder font-size: XX%.

Wie kann ich die Schriftgröße ändern?

15
user2804038

Für HTML5-Webseiten würde ich dringend empfehlen, die Werte für die Breite/Höhe von Viewpoint zu verwenden. Sie funktionieren ähnlich wie%, sind jedoch Schriftgrößen, deren Größe mit dem Fenster geändert wird.

Zum Beispiel...

.some-paragraph{
    font-size: 5vw;
}

Dies würde die Schriftgröße auf 5% der aktuellen Breite des Ansichtsfensters festlegen, selbst wenn Sie die Größe ändern.

Weitere Informationen finden Sie hier: http://www.w3.org/TR/css3-values/#viewport-relative-lengths

Hinweis: Möglicherweise müssen Sie Folgendes im Kopf haben:

 <meta name="viewport" content="initial-scale=1">
38
Victor3y

Es heißt Responsive

@media screen and (max-width: 1024px) {
your font  style goes here

}

@media screen and (max-width: 950px) {
 your font  style goes here

}


@media screen and (max-width: 650px) {
 your font  style goes here


}

@media screen and (max-width: 480px) {
 your font  style goes here

}
7
San

Sie sollten auf jeden Fall CSS-Medienabfragen verwenden, um basierend auf einer Reihe von Bildschirmverhältnissen und Spezifikationen einen Stil zu erstellen. In diesem Beispiel werden jedoch sowohl rem-Einheiten als auch jQuery verwendet, um die Schrift bei der Größenänderung des Browsers zu verkleinern. Fiddle hier .

CSS

html { font-size: 90.5%; }
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem; }

JavaScript/jQuery

$(document).ready(function () {
    var holdWidth = $(window).width();
    $(window).on('resize', function () {
        newPercentage = (($(window).width() / holdWidth) * 100) + "%";
        $("html").css("font-size", newPercentage)
    });
});

und hier ist ein Beispiel Durchschnitt der Breite und Höhe für den neuen Prozentsatz der Schriftgröße:

$(document).ready(function () {
    var holdWidth = $(window).width();
    var holdHeight = $(window).height();
    var holdAverageSize = (holdWidth + holdHeight) / 2;
    $(window).on('resize', function () {
        newAverageSize = ($(window).width() + $(window).height()) / 2;
        newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
        $("html").css("font-size", newPercentage)
        console.log(newPercentage);
    });
});
2

Überprüfen Sie Ihre Medienabfragen. Sie sollten Ihre Schriftgröße kontrollieren, wenn Sie responsive Techniken verwenden.

Ein Codebeispiel würde helfen.

Gib rem einen Schuss. Funktioniert besser als% oder em.

http://snook.ca/archives/html_and_css/font-size-with-rem

2
fauverism

Das könnte helfen. Passt die Textgröße entsprechend der Fenstergröße an, hält sie jedoch gerade so groß, dass sie mobil kompatibel ist http://typecast.com/blog/a-more-modern-scale-for-web-typography =

1
Karuhanga
.text {
    font-size: 50px;
}


@media only screen 
and (min-width : 300px)
and (max-width : 500px) {

   .text {
    font-size: 20px;
   }

}

    @media only screen 
    and (min-width : 500px)
    and (max-width : 800px) {

       .text {
        font-size: 30px;
       }

    }

</style>


<div class="text">Test Text</div>
1
user3024320

sie können dies beheben, indem Sie @media query's und einen Viewport in Ihrer css verwenden und dieses Meta-Tag Ihrer HTML-Datei hinzufügen:

 <meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>

und mit der @ media-Abfrage und dem Ansichtsfenster geben Sie an, welche Größe Sie pro Bildschirmbreite haben, indem Sie diese Medienanfrage + Ansichtsfenster in css verwenden:

 @media screen and (min-width: 820px) and (max-width: 920px) {
  @viewport { width: 820px; }   

            // your css for screens between 820 and 920 pixels in width goes here

  }

ich verwende meistens die Werte: von 20 - 600, 600 - 700, 700-820, 820 - 920, 920 - 1200, @media screen und (min-width: 1200px) {@viewport width = 1200px; } (der letzte wird die Größe für jeden Bildschirm festlegen, der größer als 1200 px ist. Der Code für die größte Version wird hier angezeigt.)

Das bedeutet, dass Sie 6 Mal Ihren CSS-Code haben, der an die Größe angepasst wird.

Dies wird als adaptives oder responsives Design bezeichnet und ist ziemlich einfach zu bewerkstelligen

Weitere Informationen finden Sie hier http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

1
Reynderke

Wie legen Sie die Schriftgröße für Ihre Grundlinie fest (gegen Ihre HTML- oder Body-Tags in Ihrer CSS-Datei)? Wenn Sie diesen Wert auf ein Pixel (oder ein anderes festes Maß) setzen oder die Standardschriftgröße eines Browsers übernehmen, werden Ihre Prozent- oder EM-Werte immer als Prozentsatz dieser Standardwerte angegeben.

Der häufigste Ansatz zum Erstellen responsiver Websites besteht in einem "Mobile first" -Ansatz, bei dem Ihr Standard-Stylesheet die Basisstyling für Ihre Website auf einem kleinen Bildschirm verwaltet. Anschließend können Sie mithilfe von Medienabfragen in CSS die Stile anpassen, wenn die Bildschirmgröße zunimmt. Verwenden Sie derzeit Medienanfragen/Haltepunkte?

0
steve

Schriftgröße: 25vmin;

Dies war eine sehr gute Anpassung der Schriftgröße in Höhe und Breite. 
Du brauchst nichts im Kopf.

0
user4565320