Topics

So passen Sie die Ränder anclamp()Heutzutage werden häufig Implementierungen verwendet, die eine Wertvariation zwischen einem Mindest- und einem Höchstwert zulassen.

Es ist sehr nützlich für responsives Design,BarrierefreiheitszoomIn diesem Sinne gibt es einen kleinen Haken.

Gängige Beispiele für clamp()

Zum Beispiel die Ränderclamp()Wenn Sie es anpassen möchten, würden Sie es wahrscheinlich so schreiben:

:root {
  --clamp-base: 16;
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1440;

  --spacing-lg-min: 24;
  --spacing-lg-max: 48;

  --spacing-lg-slope: calc(
    (var(--spacing-lg-max) - var(--spacing-lg-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --spacing-lg-intersection: calc(
    (var(--spacing-lg-max) - var(--clamp-viewport-max) * var(--spacing-lg-slope)) / var(--clamp-base)
  );
  --spacing-lg: clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  );
}

Ich werde nicht ins Detail gehen, aber

• Auf Smartphones--spacing-lg-minGröße
• Auf dem PC--spacing-lg-maxGröße
• Während dieser Zeit ist es variabel und dehnt sich gleichmäßig aus.

Es ist also ein sehr einfach zu verwendendes Muster.

Welche Fallstricke gibt es bei der Barrierefreiheit?

Das Problem ist,WCAG 2.0 Erfolgskriterium 1.4.4 „Textgröße ändern“Es ist Zeit, zu versuchen, zu antworten.

Dieser Standard wurde ursprünglich vor der Verbreitung von Smartphones eingeführt, um die Anzeige von Bildern auch bei einer Vergrößerung von bis zu 200 % auf einem PC zu ermöglichen. Für Smartphone-Browser gelten jedoch die gleichen Bedingungen.

Tatsächlich tritt dieses Phänomen eher auf, wenn Sie auf einem Smartphone auf 200 % zoomen.

1. Durch Vergrößern (Zoomen) des TextesremEinheitenbasiertBis an die Ränder expandierenAm Ende passiert es.
2. Damit können Sie eineZu breite RänderEs wird so.
3. Infolge,Der Inhaltsanzeigebereich ist extrem schmal.Dies kann zu einem verzerrten Layout führen und die Lesbarkeit der Seite beeinträchtigen.

*In der Realität scheint es jedoch so zu sein, dass selbst ausländische Regierungswebsites, auf denen die WCAG-Konformität vorgeschrieben ist, nicht viel unternehmen. Dies liegt wahrscheinlich an Kosteneffizienzproblemen und daran, dass die Notwendigkeit einer 200-prozentigen Vergrößerung auf Smartphones ohnehin kaum besteht. Daher kann man davon ausgehen, dass es kein großes Problem darstellt, wenn wir es nicht tun.

Wie kann dieses Problem gelöst werden?

Betroffen von der TextvergrößerungremStattdessen,vwVerwenden Sie Ansichtsfenster-basierte Einheiten wieMachen Sie die Ränder auch beim Zoomen nicht größer als nötigEs ist wichtig, dies zu tun.

AbervwWenn Sie nur angebenclamp()Der Vorteil der Kontrolle der Minimal- und Maximalwerte bleibt dabei unberücksichtigt.

Das ist womin()Es ist eine Funktion!

min()verwendet den „kleinsten Wert“ unter den übergebenen Werten. Verwenden Sie diese Eigenschaft, um den angewendeten Wert zwischen normalem und erweitertem Modus umzuschalten.

So schreiben Sie es.

--spacing-lg: min(
  calc(var(--spacing-lg-min) / var(--clamp-viewport-min) * 100vw),
  clamp(
    calc(var(--spacing-lg-min) / var(--clamp-base) * 1rem),
    calc(var(--spacing-lg-intersection) * 1rem + 100 * var(--spacing-lg-slope) * 1vw),
    calc(var(--spacing-lg-max) / var(--clamp-base) * 1rem)
  )
);

Wenn dies bei 375 CSS px angezeigt wird, ist der erste Wert von min--spacing-lg-minDer Wert von 24px wird in vw umgewandelt, was 6,4vw ergibt.

clamp()Der Mindestwert beträgt 1,5rem = 24px, aber bei einer Vergrößerung um 200 % werden es 48px, sodass die 6,4vw auf der linken Seite kleiner sind und angewendet werden.

Mit anderen Worten:

• Normalerweise (100 %):
  • clamp()Der Wert vonvwEs wird kleiner sein als der Referenzwert.
  • min()Da der kleinere verwendet wird,clamp()ist wirksam und die Anzeige ändert sich je nach Bildschirmbreite.
• Vergrößert (200 %):
  • clamp()Innerhalbremwird mit der Ausdehnung größer,vwDer Referenzwert ist kleiner.
  • vwEs wird der Standardwert angewendet und die Ränder werden als Prozentsatz der Bildschirmbreite festgelegt, wodurch eine übermäßige Vergrößerung verhindert wird.

Jetzt, "Reaktionsschneller Komfort"Und"Überlegungen zur Barrierefreiheit„Sie können beides erreichen!

*Übrigens ist es bei der Betrachtung auf einem PC oft besser, das Bild inklusive der Ränder zu vergrößern, um die Ausgewogenheit des Designs zu wahren.--clamp-viewport-minDieser Standard gilt nur für Smartphones.

Vergleichen Sie das tatsächliche Verhalten

Die Oberseite besteht nur aus einer Klemme, die Unterseite aus Min+Klemme.

Wenn Sie auf Ihrem Smartphone auf 200 % hineinzoomen, können Sie den Unterschied deutlich erkennen.

* Sie können die Seite vergrößern, indem Sie bei iOS Safari auf das Symbol links neben der Adressleiste und bei Android Chrome auf das Symbol oben rechts klicken.

Zusammenfassung

• clamp() ist nützlich für reaktionsschnelle Randanpassungen
• Wenn Sie das Bild jedoch vergrößern, kann es bis an die Ränder reichen, was zu Layoutproblemen führen kann.
• Kombiniert mit min(),Variabel im Normalzustand, kontrolliert bei VergrößerungDies ermöglicht eine ausgewogene Reaktion.

Wenn Sie sich der WCAG-Konformität bewusst sind, ist es beruhigend, solche Implementierungen zu integrieren. Implementierungen, die „auf 200% Vergrößerung auf Smartphones achten“, sind zwar noch selten, reduzieren aber Barrierefreiheitsrisiken, ohne die normale Lesbarkeit zu beeinträchtigen.

Übrigens: Wenn Sie über die Ränder hinaus noch feinere Anpassungen vornehmen möchten, können Sie auch Medienabfragen für engere Haltepunkte angeben.

@media (max-width: 239px) {
  /* 拡大時に適用したいCSS */
}

Wenn Sie beispielsweise einen 375 Pixel breiten Bildschirm auf 200 % vergrößern, berechnet der Browser die Ansichtsfensterbreite als „die Hälfte dieser Größe (ungefähr 188 Pixel)“, sodass er dieser schmalen Bedingung gerecht wird.

*Der Wert von 239px ist nur ein Beispiel. Sie sollten sich für einen Wert entscheiden, der Spielraum für eine spätere Bildschirmvergrößerung lässt und gleichzeitig so angepasst wird, dass die normale Anzeige nicht beeinträchtigt wird.

Die Kombination von „clamp() + min()“ mit „schmalen Haltepunkt-Medienabfragen“ ermöglicht eine flexiblere und zuverlässigere Unterstützung der Barrierefreiheit!