CSS Clamp für ein flexibleres Wrapper-Utility

Ich mag Andys Idee hier

.wrapper {
  width: clamp(16rem, 90vw, 70rem);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

Normalerweise würde ich hier einfach eine max-width setzen, aber wie Andy sagt

Dies wird in mittelgroßen Ansichtsfenstern, wie z. B. Tablets im Hochformat, bei langen Inhalten wie diesem Artikel zu einem geringfügigen Problem, da sich die Zeilenlängen kontextbezogen sehr lang anfühlen.

Auf supergroßen Bildschirmen werden Sie also auf 70rem (oder was auch immer Sie für ein gutes Maximum halten) begrenzt, und auf kleinen Bildschirmen erhalten Sie die volle Breite, was in Ordnung ist. Aber es sind diese Zwischengrößen, die nicht so toll sind. Ich habe eine kleine Demo gemacht, um ein Gefühl dafür zu bekommen. Dieses Video macht es, denke ich, deutlich.

Direkter Link →

Kommentare

Michael Cohen

# 17. Februar 2021

Entschuldigung, dass ich „dieser Typ“ bin, aber wie unterscheidet sich das vom Setzen von min-width: 16rem; width: 90vw; max-width: 70rem;? Das mache ich schon seit gefühlten Ewigkeiten, zumindest (ohne die min-width, was einfach eine schlechte Idee für flexible Inhalte zu sein scheint).

Mike Mai

# 17. Februar 2021

Ich bin kein Fan von der traditionellen Wrapper mit max-width. Ich bevorzuge es, die Berechnung nur mit dem Padding durchzuführen, so erhalte ich die Vorteile der Verwendung von Hintergrundfarbe und Hintergrundbild.

:root {
  --page-padding-x: calc(
    (100vw - min(80vw, 75ch)) / 2
  );
}

.section {
  padding-right: var(--page-padding-x);
  padding-left: var(--page-padding-x);
}

Andreas Lagerkvist

# 19. Februar 2021

Ich mache so ziemlich dasselbe;

:root {
    --site-width-min: 85vw;
    --site-width-max: 1080px;
    --site-width: var(--site-width-min);
    --site-padding: calc((100vw - var(--site-width)) / 2);
}

@supports (padding: min(10%, 100px)) {
    :root {
        --site-width: min(var(--site-width-min), var(--site-width-max));
        --site-padding: calc((100vw - var(--site-width)) / 2);
    }
}

.section {
    padding: var(--spacing-x-large) var(--site-padding);
}

.container {
    width: var(--site-width);
    margin: var(--spacing-x-large) auto;
}

Arkay

# 18. Februar 2021

Ich will auch nicht „dieser Typ“ sein. Aber neue Werkzeuge in CSS zu verwerfen, ist der Grund, warum wir eine Menge müder Dinosaurier haben, die sich über Flexbox beschweren, obwohl Floats auch gut funktionierten.

Ed Murphy

Permalink zum Kommentar# 28. Dezember 2021

Niemand hat jemals gesagt, dass Floats gut funktionierten. Tabellen, vielleicht.

Will

# 19. Februar 2021

Ich habe das Gefühl, jedes Mal, wenn ich hierher komme, lerne ich nur eine weitere Möglichkeit, etwas zu tun, das bereits funktioniert, ohne wirklichen Nutzen.

Und seien wir ehrlich, wenn wir responsives Webdesign brauchen, gibt es keine bessere Alternative als das Grid-System von Bootstrap.

Geoff Graham

Permalink zum Kommentar# 19. Februar 2021

Es gibt keine bessere Alternative zum Bootstrap-Grid-System.

Ich würde mich freuen, wenn Sie das näher erläutern würden. Gleichzeitig denke ich, dass Sie hier das GROSSE Bild übersehen. CSS bietet uns neue Utilities, die uns eine feinere Kontrolle über das responsive Design geben – so sehr, dass Media Queries jetzt nur noch ein weiteres Werkzeug im Werkzeugkasten sind.

Also, ist clamp() besser als max-width? Ich weiß nicht. Es kommt darauf an, wofür es ist. In diesem Fall ist es ein ziemlich gutes Wrapper-Utility, das es uns ermöglicht, einen Wertebereich zu erzwingen, wie es max-width nicht kann.

Und ist es besser als das Grid-System von Bootstrap? Wieder, ich weiß nicht. Aber sie gleichzusetzen ist eine schlechte Idee, weil clamp() nicht als System oder Framework konzipiert ist, so wie es Bootstrap ist.

Christian Rau

# 23. Februar 2021

Ein großartiges Beispiel -(e) auch in den Kommentaren!

Im Vergleich zum max-width Beispiel scheint es ein Problem mit dem Zeilenumbruch bei kleinen Bildschirmgrößen zu geben.

Wie vermeide ich, dass Text abgeschnitten wird?

Nicolas Hoizey

# 31. Januar 2022

Ich verstehe es nicht. Wie ist es besser als das?

width: 80vw;
max-width: 60rem;

Zumindest vermeidet diese Version einen horizontalen Scrollbalken auf Ansichtsfenstern, die schmaler als 320px/16rem sind.

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.