Was aber, wenn der Container nicht das Ansichtsfenster (Body) ist?
Diese Frage wird in einem Kommentar von Alex unter der akzeptierten Antwort gestellt .
Diese Tatsache bedeutet nicht, vwdass für diesen Behälter nicht in gewissem Umfang die Größe verwendet werden kann. Um überhaupt eine Variation zu sehen, muss man davon ausgehen, dass der Behälter in irgendeiner Weise flexibel ist. Ob durch einen direkten Prozentsatz widthoder durch 100% minus Margen. Der Punkt wird "streitig", wenn der Container immer auf beispielsweise 200pxbreit eingestellt ist - dann setzen Sie einfach einen font-size, der für diese Breite funktioniert.
Beispiel 1
Bei einem Container mit flexibler Breite muss jedoch erkannt werden, dass der Container in irgendeiner Weise immer noch außerhalb des Ansichtsfensters dimensioniert wird . Daher muss eine vwEinstellung basierend auf dem prozentualen Größenunterschied zum Ansichtsfenster angepasst werden. Dies bedeutet, dass die Größe der übergeordneten Wrapper berücksichtigt wird. Nehmen Sie dieses Beispiel :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
Angenommen, hier divist das ein Kind von body, ist es 50%von dieser 100%Breite, die in diesem Grundfall die Größe des Ansichtsfensters ist. Grundsätzlich möchten Sie eine festlegen vw, die für Sie gut aussieht. Wie Sie in meinem Kommentar in dem obigen CSS Inhalt sehen können, können Sie „denken“ durch diese mathematisch in Bezug auf die volle Darstellungsgröße, aber Sie nicht brauchen , das zu tun. Der Text wird mit dem Container "gebogen", da sich der Container mit der Größe des Ansichtsfensters biegt. UPDATE: Hier ist ein Beispiel für zwei unterschiedlich große Container .
Beispiel 2
Sie können die Größe des Ansichtsfensters sicherstellen, indem Sie die darauf basierende Berechnung erzwingen. Betrachten Sie dieses Beispiel :
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
Die Größe basiert weiterhin auf dem Ansichtsfenster, wird jedoch im Wesentlichen basierend auf der Containergröße selbst eingerichtet.
Sollte sich die Größe des Containers dynamisch ändern ...
Wenn die Größe des Containerelements seine prozentuale Beziehung entweder über @mediaHaltepunkte oder über JavaScript dynamisch ändern würde, müsste unabhängig von der Basis "Ziel" neu berechnet werden, um dieselbe "Beziehung" für die Textgröße beizubehalten.
Nehmen Sie Beispiel 1 oben. Wenn das durch entweder oder JavaScript divauf 25%Breite umgestellt @mediawurde, font-sizemüsste das gleichzeitig entweder in der Medienabfrage oder durch JavaScript an die neue Berechnung von angepasst werden 5vw * .25 = 1.25. Dies würde die Textgröße auf die gleiche Größe bringen, die sie gewesen wäre, wenn die "Breite" des ursprünglichen 50%Containers gegenüber der Größe des Ansichtsfensters um die Hälfte verringert worden wäre, aber jetzt aufgrund einer Änderung der eigenen prozentualen Berechnung verringert wurde.
Eine Herausforderung
Mit der CSS3 - calc()Funktion in Gebrauch ist , würde es schwierig werden , dynamisch anzupassen, da diese Funktion für nicht funktioniert font-sizeZwecke zu diesem Zeitpunkt. Sie können also keine reine CSS 3-Anpassung vornehmen, wenn sich Ihre Breite ändert calc(). Natürlich reicht eine geringfügige Anpassung der Breite für die Ränder möglicherweise nicht aus, um eine Änderung zu rechtfertigen font-size, sodass dies möglicherweise keine Rolle spielt.
font-size: 100%;bedeutet 100% der Größe, die der Text gehabt hätte (dh die, die er von seinem übergeordneten Text geerbt hat). Standardmäßig ist das 16px. Wenn Sie also 50% verwenden würden, wäre es Schriftgröße: 8px