Autor: @XboxYan
Original: https://segmentfault.com/a/1190000042675552
Inhaltsverzeichnis
3. Einige Einschränkungen der Containerabfrage
Im Ant-Design gibt es eine solche Avatar-Komponente. Wenn die Zeichenfolge lang ist, kann die Schriftgröße automatisch an die Breite des Avatars angepasst werden. Der Effekt ist wie folgt
Dies wird natürlich dadurch erreicht, dass JS den Text automatisch entsprechend der Anzahl der Zeichen skaliert
Nun kann ein ähnlicher Effekt nur mit CSS erzielt werden. Schauen wir uns das einmal an. Sie können auch vorab die Online-Demo besuchen: CSS avator (runjs.work)
1. CSS-Containergrößeneinheit
Um diesen Effekt zu erzielen, ist die Hilfe von Containergrößeneinheiten erforderlich. Diese Einheiten erscheinen zusammen mit der CSS-Containerabfrage, und es gibt die folgenden
[Problem 2758] neuen Funktionen des New-Era-Layouts – Containerabfrage
Informationen zur Containerabfrage finden Sie in diesem Artikel: Einführung der am meisten erwarteten und offiziell unterstützten CSS-Container-Containerabfrage im Jahr 2022. Dieser Artikel enthält keine spezifischen Containerabfrageanweisungen
-
cqw Verhältnis der Containerabfragebreite (Containerabfragebreite). 1cqw entspricht 1 % der Breite des Behälters. Angenommen, die Containerbreite beträgt 1000 Pixel, dann beträgt der berechnete Wert, der 1cqw entspricht, 10 Pixel.
-
Verhältnis der CQH-Containerabfragehöhe (Containerabfragehöhe). 1cqh entspricht 1 % der Behälterhöhe.
-
cqi gibt den Anteil der Inline-Größe der Containerabfrage an (Container Query Inline-Size). Dies ist die logische Attributeinheit, die standardmäßig cqw entspricht
-
cqb-Container-Abfrage-Richtungsgrößenverhältnis (Container-Abfrageblockgröße) auf Blockebene. Wie oben, entspricht standardmäßig cqh
-
cqmin-Container-Abfrage-Mindestverhältnis (Container-Abfrage-Mindestgröße). Nehmen Sie den kleineren Wert von cqw und cqh
-
cqmax gibt den Anteil der Containerabfrage mit größerer Größe an (Container Query Min). Nehmen Sie den größeren Wert von cqw und cqh
Mit diesen Größeneinheiten ist es leicht zu erkennen, dass sich die Textgröße mit der Größe des Containers ändert. Hier ist ein Beispiel
<div class="con">
<p class="text">大家好，欢迎关注前端侦探</p>
</div>Wenn der Containertyp nicht deklariert wird, entspricht cqw vw, was der Behandlung der gesamten Seite als Container entspricht. Hier hoffen wir, dieses div als Referenzobjekt zu verwenden, das im Voraus als deklariert werden muss container-typefolgt
.con {
container-type: inline-size;
}
.text{
font-size: 10cqw;
}Der Effekt ist wie folgt
Auf diese Weise kann der Textskalierungseffekt leicht realisiert werden.
Das Prinzip ist sehr einfach, wie wendet man es an?
2. Adaptiver Text-Avatar
Rückblickend auf den tatsächlichen Fall: Wie kann die Schriftgröße an die Breite des Avatars angepasst werden? Das heißt, je mehr Text, desto kleiner die Schriftgröße.
Eine relativ einfache Idee besteht darin, dass je mehr Text desto mehr Breite einnimmt und dass sich dann nach dem vorherigen Prinzip die Textgröße mit der Breite ändert. Hier ist es jedoch umgekehrt proportional: Je breiter die Breite, desto kleiner die Schriftgröße .
Angenommen, der HTML-Code sieht so aus
<div class="avator">
<span>侦探</span>
</div>einfache Modifikation
.avator{
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: bisque;
color: rgb(250, 84, 28);
white-space: nowrap;
}Der Effekt ist wie folgt
Jetzt kommt das Problem. Derzeit ist die Breite der äußeren Ebene festgelegt. Es scheint, dass es keine Möglichkeit gibt, den Container anhand der vom Text eingenommenen Breite abzufragen. Was soll ich tun?
Meine Idee besteht darin, einen identischen Text zu erstellen, die Breite des äußeren Containers (A) durch den inneren Text bestimmen zu lassen und dann die Breite des Containerfelds (B) auf die gleiche Breite wie (A) einzustellen dass der Container nicht abgeschlossen ist?
Nach dieser Idee kann das HTML in dieses umgewandelt werden
<div class="avator">
<div class="avator-inner" alt="侦探"><!--外层容器A-->
<div class="avator-container"><!--容器盒子B-->
<span>侦探</span>
</div>
</div>
</div>Der Text des Außencontainers A kann durch Pseudoelemente generiert werden
.avator-inner::before{
content: attr(alt);
font-size: 40px;
}Zu diesem Zeitpunkt wird der äußere Container A, dh .avator-inner die Größe, ::before wie folgt vollständig durch Pseudoelemente erweitert
Stellen Sie dann die Containerbox B ein, dh .avator-container stellen Sie sie auf den gleichen Wert wie den Außencontainer A ein und verwenden Sie die absolute Positionierung
.avator-container {
position: absolute;
inset: 0;
container-type: inline-size;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}Auf diese Weise kann sich die Containerbox automatisch mit der Größe des Pseudoelements ändern und dann eine geeignete Größe für den internen Text festlegen. Da er umgekehrt proportional ist, kann er wie folgt subtrahiert werden
.avator-container span {
font-size: calc( 24px - 10cqw );
}Der Effekt ist wie folgt
Ändern Sie den Text erneut, z. B. 4 Zeichen
Es ist ersichtlich, dass die interne Textgröße umso kleiner ist, je mehr Text vorhanden ist. Dies ist genau der Effekt, den wir benötigen
Als nächstes blenden Sie den vom Pseudoelement generierten Text aus, um den Effekt des Artikelanfangs wie folgt zu erzielen
Unten finden Sie den vollständigen Code
.avator{
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 8px;
background: bisque;
color: rgb(250, 84, 28);
white-space: nowrap;
}
.avator-inner{
position: relative;
}
.avator-inner::before{
content: attr(alt);
visibility: hidden;
font-size: 40px;
}
.avator-container {
position: absolute;
inset: 0;
container-type: inline-size;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.avator-container span {
font-size: calc( 24px - 10cqw );
overflow: hidden;
max-width: 40px;
text-overflow: ellipsis;
}Sie können auch die Online-Demo besuchen: CSS avator (runjs.work)
3. Einige Einschränkungen der Containerabfrage
Obwohl dieser Effekt früher erreicht wurde, ist er nicht sehr elegant, hauptsächlich weil es viele Einschränkungen bei Containerabfragen gibt
1. Erstens gilt die Containerabfrage nur für die untergeordneten Elemente des Containers, nicht für sich selbst, was zu einer redundanten Struktur führt
Im obigen Beispiel enthält der div-Container auch ein p-Element, und die Textgröße wird auf dem p-Element festgelegt, was überflüssig erscheint. Kann sie direkt auf dem div festgelegt werden? Dadurch wird eine Etikettenschicht eingespart. Die Antwort ist nein! Das Folgende ist die Auswirkung der Einstellung direkt auf das Div
Wie Sie sehen, hängt die Textgröße von der Breite der Seitenansicht ab. Wenn es also direkt auf das Div gesetzt wird, ist der von cqw referenzierte Container zu diesem Zeitpunkt nicht mehr er selbst, sondern sucht weiter nach oben, bis die äußerste Ebene, dh das von cqw durchsuchte Objekt, der nächstgelegene übergeordnete Container ist Element und enthält sich nicht selbst, dies erfordert viel Aufmerksamkeit
2. Darüber hinaus kann die Größe der Container-Abfragebox selbst nicht durch die internen Elemente bestimmt werden
inline-block Dies ist der Grund für die Erstellung des gleichen Textes im obigen Beispiel. Wenn beispielsweise die Breite der Containerbox selbst nicht festgelegt ist, sollte die normale Elementbreite durch den internen Text bestimmt werden, aber nach der Einstellung funktioniert dies container-type nicht ist überhaupt keine Breite, weshalb die Breite direkt durch die absolute Positionierung festgelegt wird.
Der Grund ist jedoch auch leicht zu verstehen: Unter der Annahme, dass dies zutrifft, ändert sich die Breite des Containers, wenn sich die Schriftgröße des untergeordneten Elements ändert, und die Änderung der Containerbreite führt zu einer Änderung der Schriftgröße. Das ist eine Endlosschleife, daher ist dies nicht zulässig
3. Schließlich ist die spezifische Größe, die der Containerabfragegröße entspricht, eine Größeneinheit, was dazu führt, dass viele Attribute nicht angewendet werden können.
wie zum Beispiel Maßstab
Im obigen Beispiel wird die Textgröße durch font-size Ändern geändert. Tatsächlich ist der beste Weg, scaleweil der Browser eine Mindestbeschränkung für die Schriftgröße hat und Scale diese Beschränkung nicht hat, aber die Einheit cqw kann nicht auf Scale verwendet werden, etwas Entschuldigung , es wäre schön, wenn es eine Prozenteinheit gäbe
Wenn Ihnen die Mühe nichts ausmacht, können Sie natürlich @container zur präzisen Steuerung verwenden
Viertens: Fassen Sie zusammen
Das Obige ist der gesamte Inhalt dieses Artikels. Er verwendet hauptsächlich die Containergrößeneinheit, um einen adaptiven Textgrößeneffekt zu erzielen, und fasst einige aktuelle Einschränkungen einiger Containerabfragen zusammen. Lassen Sie uns dies unten zusammenfassen
-
Die Containergrößeneinheit ist eine neue Einheit, die zusammen mit der CSS-Containerabfrage erscheint, einschließlich cqw, cqh, cqi, cqb, cqmin, cqmax
-
Die Containergrößeneinheit muss in dem Feld gültig sein, das den Containertyp deklariert, andernfalls wird die gesamte Seite als Container betrachtet, was vw, vh entspricht
-
Da die Breite des Avatars fest ist, kann er nicht direkt anhand der Textbreite des Containers abgefragt werden. Um die Container-Abfragebedingung zu erstellen, muss eine Kopie desselben Textes erstellt werden
-
Je mehr Text auf dem Avatar vorhanden ist, desto kleiner ist die Schriftgröße. Sie ist also umgekehrt proportional. Sie können die Methode der Subtraktion verwenden
-
Die Implementierung ist nicht sehr elegant und es gibt viele HTML-Strukturen, hauptsächlich weil es viele Einschränkungen bei Containerabfragen gibt
-
Die Containerabfrage ist nur für die untergeordneten Elemente des Containers gültig, nicht für sich selbst, was zu einer redundanten Struktur führt
-
Die Größe der Container-Abfragebox selbst kann nicht durch die internen Elemente bestimmt werden, was zu einer Endlosschleife führt
-
Die spezifische Größe, die der Containerabfragegröße entspricht, unterstützt keine relativen Einheiten, wie z. B. Prozentsätze
Doch trotz vieler Einschränkungen ist die Containerabfrage derzeit immer noch eines der wertvollsten neuen Features und viele Tricks und Kniffe, die bisher nötig waren, können auf neue Weise umgesetzt werden.