Schriftgröße im Verhältnis zur Bildschirmauflösung des Benutzers?

81

Ich habe eine flüssige Website und das Menü ist 20% seiner Breite. Ich möchte, dass die Schriftgröße des Menüs richtig gemessen wird, damit sie immer zur Breite des Felds passt und niemals in die nächste Zeile umgebrochen wird. Ich habe überlegt, "em" als Einheit zu verwenden, aber es ist relativ zur Schriftgröße des Browsers. Wenn ich also die Auflösung ändere, bleibt die Schriftgröße gleich.

Versuchte auch Punkte und Prozentsätze. Nichts funktioniert so wie ich es brauche ...

Geben Sie mir bitte einen Hinweis, wie ich vorgehen soll.

css measurement barakuda28
quelle

Antworten:

51 
@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

Sie können es manuell entsprechend der Bildschirmgröße des Bildschirms angeben. Sehen Sie sich nur die andere Bildschirmgröße an und fügen Sie die Schriftgröße manuell hinzu.

Arpit Srivastava
quelle
16
Wichtiger Hinweis: Sie müssen dies Ihrem HTML-Kopf hinzufügen. <meta name="viewport" content="width=device-width" /> Sie können auch max-widthanstelle von max-device-widthfür ein "reaktionsschnelleres" Gefühl verwenden.
Sheharyar
@ user65165 Ich habe nicht verstanden, was du sagen willst?
Arpit Srivastava
maximale Gerätebreite funktioniert nicht. Nur die maximale Breite funktioniert, wenn ich den Browserbildschirm anpasse.
Ramisa Anjum Aditi
54

Sie verwenden können em, %, px. In Kombination mit media-queries Siehe diesen Link , um mehr über Medienabfragen zu erfahren. Außerdem hat CSS3 einige neue Werte für Dinge in Bezug auf die aktuelle Darstellungsgröße Sizing: vw, vh, und vmin. Siehe Link dazu .

Miljan Puzović
quelle
27
vw, vh, vminRocken diese Antwort.
Frank Lämmer
1
Dies ist jetzt die richtige Antwort, da Ansichtsfenstereinheiten von jedem * Browser unterstützt werden: caniuse.com/#feat=viewport-units .
Cazzer
nicht vergessenvmax
live2
28

Neuer Weg

Es gibt verschiedene Möglichkeiten, dies zu erreichen.

CSS3 unterstützt neue Dimensionen, die sich auf den Ansichtsport beziehen. Aber das funktioniert nicht in Android.

  1. 3,2vw = 3,2% der Breite des Ansichtsfensters
  2. 3,2vh = 3,2% der Höhe des Ansichtsfensters
  3. 3,2 vmin = kleiner als 3,2 vw oder 3,2 vh

  4. 3,2 vmax = größer als 3,2 vw oder 3,2 vh

    body
{
    font-size: 3.2vw;
}

siehe css-tricks.com / .... und siehe auch caniuse.com / ....

Alter Weg

  1. Verwenden Medienabfrage , sondern erfordert die Schriftgrößen für mehrere Stützpunkte

    body
{
    font-size: 22px; 
}
h1
{
   font-size:44px;
}

@media (min-width: 768px) 
{
   body
   {
       font-size: 17px; 
   }
   h1
   {
       font-size:24px;
   }
}

  2. Verwenden Sie die Abmessungen in % oder rem . Ändern Sie einfach die Grundschriftgröße, alles wird sich ändern. Im Gegensatz zu der vorherigen können Sie einfach die Hauptschriftart und nicht jedes Mal h1 ändern oder die Basisschriftgröße auf die Standardeinstellung des Geräts zurücksetzen und alle in em ruhen lassen.

    • "Root Ems" (rem) : Das "rem" ist eine skalierbare Einheit. 1rem entspricht der Schriftgröße des Körpers / HTML. Wenn beispielsweise die Schriftgröße des Dokuments 12pt beträgt, entspricht 1em 12pt. Root-Ems sind von Natur aus skalierbar, sodass 2em gleich 24pt, .5em gleich 6pt usw. wäre.

    • Prozent (%) : Die prozentuale Einheit ähnelt der „em“ -Einheit, abgesehen von einigen grundlegenden Unterschieden. In erster Linie entspricht die aktuelle Schriftgröße 100% (dh 12pt = 100%). Während Sie die Prozenteinheit verwenden, bleibt Ihr Text für mobile Geräte und für die Barrierefreiheit vollständig skalierbar.

siehe kyleschaeffer.com / ....

aWebDeveloper
quelle
Schriftgröße: 3.2vw hat in meinem Fall funktioniert. Obwohl nicht sicher über die Browser-Unterstützung.
Manpikin
"Ein em entspricht der aktuellen Schriftgröße. Wenn beispielsweise die Schriftgröße des Dokuments 12pt beträgt, entspricht 1em 12pt."Ist eigentlich emrelativ zur Schriftgröße des Containers. Dies kann zu unerwartetem Verhalten führen, wenn für den Container auch die Schriftgröße festgelegt emist. Verwenden Sie diese Option, um die Größe relativ zur Dokumentschrift zu ermitteln rem.
Stijn de Witt
18

Ich habe eine nette JS-Lösung entwickelt, die für vollständig ansprechendes HTML geeignet ist (dh HTML, das mit Prozentsätzen erstellt wurde).

  1. Ich benutze nur "em", um Schriftgrößen zu definieren.

  2. Die HTML-Schriftgröße ist auf 10 Pixel eingestellt:

    html {
  font-size: 100%;
  font-size: 62.5%;
}

  3. Ich rufe eine Funktion zur Größenänderung von Schriftarten auf, wenn Dokumente bereit sind:

// Dies erfordert JQuery

function doResize() {
    // FONT SIZE
    var ww = $('body').width();
    var maxW = [your design max-width here];
    ww = Math.min(ww, maxW);
    var fw = ww*(10/maxW);
    var fpc = fw*100/16;
    var fpc = Math.round(fpc*100)/100;
    $('html').css('font-size',fpc+'%');
}
Elad Ziv
quelle
interessante Lösung, ist nicht schlecht. Ich habe getestet, dass ich gelernt habe, wie ich es benutze, aber wenn ich dies auf 10px-Text in Fenstern mit maximaler Größe korrigiert habe, ist es in Ordnung? aber dieses? Was ist "16"? Was ist das? var fpc = fw * 100/16;
Domenico Monaco
4

Ich bin mir nicht sicher, warum das so kompliziert ist. Ich würde dieses grundlegende Javascript machen

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

Wobei 12 12px bei 1280 Auflösung bedeutet. Hier entscheiden Sie den gewünschten Wert

user3334188
quelle
2

Ich habe eine Variante von https://stackoverflow.com/a/17845473/189411 erstellt

Hier können Sie die minimale und maximale Textgröße in Bezug auf die minimale und maximale Größe des Felds festlegen, für das Sie die Größe "aktivieren" möchten. Außerdem können Sie die Größe des dom-Elements überprüfen, das sich von dem Feld unterscheidet, in dem Sie die Textgröße anwenden möchten.

Sie ändern die Größe von Text zwischen 19 und 25 Pixel für das Element # Größe 2, basierend auf der Breite von 500 Pixel und 960 Pixel für das Element # Größe 2

resizeTextInRange(500,960,19,25,'#size-2');

Sie ändern die Größe von Text zwischen 13 und 20 Pixel für ein Element der Größe 1, basierend auf der Breite des Körperelements von 500 und 960 Pixel

resizeTextInRange(500,960,13,20,'#size-1','body');

Den vollständigen Code finden Sie unter https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

function inRange (x,min,max) {
    return Math.min(Math.max(x, min), max);
}

function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {

    if(elementCheck==0){elementCheck=elementApply;}

    var ww = $(elementCheck).width();
    var difW = maxW-minW;
    var difT = textMaxS- textMinS;
    var rapW = (ww-minW);
    var out=(difT/100)*(rapW/(difW/100))+textMinS;
    var normalizedOut = inRange(out, textMinS, textMaxS);
    $(elementApply).css('font-size',normalizedOut+'px');

    console.log(normalizedOut);

}

$(function () {
    resizeTextInRange(500,960,19,25,'#size-2');
    resizeTextInRange(500,960,13,20,'#size-1','body');
    $(window).resize(function () {
        resizeTextInRange(500,960,19,25,'#size-2');
        resizeTextInRange(500,960,13,20,'#size-1','body');
    });
});
Domenico Monaco
quelle
0

Es ist hilfreich, keine Medienabfragen zu verwenden, da hierdurch die Schriftgröße schrittweise skaliert werden kann.

Durch die Verwendung von vwEinheiten wird die Schriftgröße relativ zur Größe des Ansichtsfensters angepasst.

Durch die direkte Konvertierung von vwEinheiten in Schriftgröße wird es schwierig, sowohl für mobile Auflösungen als auch für Desktops den Sweet Spot zu finden.

Ich empfehle etwas wie:

body {
    font-size: calc(0.5em + 1vw);
}

Gutschrift: CSS im Detail

Itai Noam
quelle
0 
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)

</script>

Ich hoffe das wird helfen. Ich verwende diese Formel für mein Phasenspiel.

Pavan Kumar
quelle