Fluid alles andere

Wir alle kennen reaktionsschnelles Design, oder? Wir verwenden Medien, um zu fragen. Nein, jetzt haben wir Container verwendet, um zu fragen, nicht wahr? Manchmal verwenden wir Flexbox oder automatisches Streaming -Netz geschickt. Wenn wir mutiger sein wollen, können wir auch flüssige Typografie ausprobieren.

Ich bin ein wenig ungewohnt, dass reaktionsschnelle Designs häufig in diskrete Blöcke aufgeteilt werden, wie "Layout A zu dieser Größe, dann Layout B, bis genügend Platz für Layout C ist". Dies ist in Ordnung, es funktioniert und eignet sich für den Workflow, den Bildschirm als statisches Layout in PhotoFigva zu entwerfen (Haftungsausschluss, ich habe den Softwarenamen erfunden). Aber dieser Prozess scheint mir ein Kompromiss zu sein. Ich habe immer geglaubt, dass reaktionsschnelles Design für Benutzer nahezu unsichtbar sein sollte. Als sie sich für K-Pop-Tickets und einen Besuch meiner Website auf Mobiltelefonen ansahen, sollten sie nicht bemerken, wie unterschiedlich es war, als sie auf dem riesigen, gebogenen Gaming-Monitor sitzen, überzeugten sie ihren Chef, vor einer Stunde zu brauchen.

Betrachten Sie dieses einfache Held -Banner und sein mobiles Äquivalent. Entschuldigung, das Design ist rau. Bilder werden von KI erzeugt, aber dies ist die einzige KI, die Teil dieses Artikels erzeugt wird.

Die Position und Größe von Mongoose und Text sind unterschiedlich. Die traditionelle Art, dies zu erreichen, besteht darin, zwei Layouts mithilfe <del>媒体</del> (sorry, Container) zu wählen. Jedes Layout kann eine gewisse Flexibilität haben, z. B. den Zentrieren von Inhalten und eine kleine Menge Fluid -Typografie für die Schriftgröße, aber wir werden einen Punkt auswählen, an dem wir das Layout in die gestapelte Version und aus der gestapelten Version umschalten. Bei der Breite in der Nähe des Haltepunkts kann das Layout ein wenig leer oder ein wenig überfüllt aussehen.

Gibt es einen anderen Weg?

Fakten haben gezeigt, dass haben. Wir können das Konzept der Flüssigkeits -Arten auf fast alles anwenden. Auf diese Weise können wir ein Layout haben, das sich reibungslos mit der Größe des übergeordneten Containers ändert. Nur wenige Benutzer werden den Übergang sehen, aber sie werden die Ergebnisse zu schätzen wissen. Um ehrlich zu sein, werden sie es tun.

Designstil starten

Der erste Schritt, lass uns das Layout separat stylen, ein bisschen wie wenn wir Breitenabfrage und Haltepunkte verwenden. Verwenden wir Containerfragen und Haltepunkte zusammen, damit wir leicht erkennen können, welche Eigenschaften geändert werden müssen.

Dies ist das Zeichen unseres Helden -Banners, es wird sich nicht ändern:

<div>
  <div>
    <h1>LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

Dies ist die breite Version mit CSS:

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

Ich füge das Hintergrundbild an ein ::before pseudoelement an, damit ich Containerabfragen darauf verwenden kann (da der Container sich nicht selbst abfragen kann). Wir werden dies später behalten, damit wir Einheiten (CQI) mit Inline -Containern abfragen können. Hier ist die Containerabfrage, die nur den Wert zeigt, den wir glatt machen werden:

@container (max-width: 800px) {
  #hero {
    .details {
      top: 50px;
      left: 20px;

      h1 { font-size: 3.5rem; }

      p { font-size: 2rem; }
    }

    &::before {
      background-position-x: -310px;
      background-position-y: -25px;
      background-size: auto 710px;
    }
  }
}

Sie können den Code sehen, der in einer Live -Demo ausgeführt wird - es ist völlig statisch, die Einschränkungen eines typischen Ansatzes zu zeigen.

Lassen Sie uns glatt sein

Jetzt können wir die Start- und Endpunkte der Größe und Position des Textes und des Hintergrunds erhalten und es glatt machen. Die Textgröße verwendet Fluid -Typografie in einer Weise, mit der Sie bereits vertraut sind. Hier ist das Ergebnis - ich werde diese Ausdrücke erläutern, nachdem Sie sich den Code angesehen haben.

Erstens ist die Änderung der Textposition und -größe:

<div>
  <div>
    <h1>LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

Dies ist die Hintergrundposition und Größe des Mongolienbildes:

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

Jetzt können wir die Containerabfrage vollständig löschen.

erklären wir diese clamp() Ausdrücke. Wir werden mit dem Ausdruck des top -attributs beginnen.

@container (max-width: 800px) {
  #hero {
    .details {
      top: 50px;
      left: 20px;

      h1 { font-size: 3.5rem; }

      p { font-size: 2rem; }
    }

    &::before {
      background-position-x: -310px;
      background-position-y: -25px;
      background-size: auto 710px;
    }
  }
}

Sie werden feststellen, dass es dort einen Kommentar gibt. Diese Ausdrücke sind eine gute Vorstellung davon, warum magische Zahlen schlecht sind. Aber wir können sie hier nicht vermeiden, weil sie Lösungen für einige gleichzeitige Gleichungen sind - CSS kann das nicht!

Die an

übergebenen oberen und unteren Grenzen sind klar genug, aber der Ausdruck in der Mitte kommt von diesen gleichzeitigen Gleichungen: clamp()

/* 行更改
 * -12,27 +12,32
 */

.details {
  /* ... 行 14-16 未更改 */
  /* 对 360px 宽的容器计算结果为 50px，对 1200px 宽的容器计算结果为 220px */
  top: clamp(50px, 20.238cqi - 22.857px, 220px);

  /* 对 360px 宽的容器计算结果为 20px，对 1200px 宽的容器计算结果为 565px */
  left: clamp(20px, 64.881cqi - 213.571px, 565px);

  /* ... 行 20-25 未更改 */
  h1 {
    /* 对 360px 宽的容器计算结果为 3.5rem，对 1200px 宽的容器计算结果为 5rem */
    font-size: clamp(3.5rem, 2.857rem + 2.857cqi, 5rem);
    /* ... 字体粗细未更改 */

  }

  p {
    /* 对 360px 宽的容器计算结果为 2rem，对 1200px 宽的容器计算结果为 2.5rem */
    font-size: clamp(2rem, 1.786rem + 0.952cqi, 2.5rem);
  }
}

… wobei f die Anzahl der Längeneinheiten fester Größe (d. H. PX) und V die Variable-Größe-Einheit (CQI) ist. In der ersten Gleichung sagen wir, wenn 1CQI gleich 12px ist, möchten wir, dass der Ausdruck auf 220px berechnet wird. In der zweiten Gleichung sagen wir, dass wir 50px wollen, wenn 1CQI 3,6px ist, und diese Lösung:

lautet:

/* 行更改
 * -50,3 +55,8
 */

/* 对 360px 宽的容器计算结果为 -310px，对 1200px 宽的容器计算结果为 0px */
background-position-x: clamp(-310px, 36.905cqi - 442.857px, 0px);
/* 对 360px 宽的容器计算结果为 -25px，对 1200px 宽的容器计算结果为 0px */
background-position-y: clamp(-25px, 2.976cqi);
/* 对 360px 宽的容器计算结果为 710px，对 1200px 宽的容器计算结果为 589px */
background-size: auto clamp(589px, 761.857px - 14.405cqi, 710px);

… Dies wird in einen berechnungsfreundlichen Ausdruck sortiert: 20.238cqi – 22.857px.

Wenn die festen Einheiten unterschiedlich sind, müssen wir die Größe der variablen Einheiten entsprechend ändern. Daher haben wir für die Schriftgröße des <h1></h1> -Elements;

/* 对 360px 宽的容器计算结果为 50px，对 1200px 宽的容器计算结果为 220px */
top: clamp(50px, 20.238cqi - 22.857px, 220px);

======================================================================================================================================================================

Dies ist die Lösung dieser Gleichungen, da 1CQI mit 0,75Rem mit 1200px (mein REM relativ zum Standard -UA -Stylesheet 16px) ist, während 1CQI bei 360px breit ist.

<code>f + 12v = 220
f + 3.6v = 50</code>

Es ist zu beachten, dass sich die Gleichungen je nach Einheit Ihres Ziels unterscheiden.

Ehrlich gesagt, es ist langweilig, diese langweilige Mathematik jedes Mal zu machen, also habe ich einen Taschenrechner gemacht, den Sie verwenden können. Es löst nicht nur Gleichungen für Sie (genau bis zu drei Dezimalstellen, um Ihr CSS auf dem Laufenden zu halten), sondern bietet auch nützliche Kommentare mit Ausdrücken, damit Sie sehen können, woher sie stammen und magische Zahlen vermeiden. Fühlen Sie sich frei, es zu benutzen. Ja, es gibt viele ähnliche Taschenrechner, aber sie konzentrieren sich auf die Typografie, also (richtig) auf REM -Einheiten. Wenn Sie einen CSS -Präprozessor verwenden, können Sie möglicherweise JavaScript portieren.

Die

clamp() -Funktion ist zu diesem Zeitpunkt nicht unbedingt erforderlich. In jedem Fall wird die Grenze von clamp() auf einen Wert eingestellt, wenn die Containerbreite 360px oder 1200px beträgt. Da der Container selbst auf diese Einschränkungen beschränkt ist - indem die Werte min-width und max-width festgelegt werden - sollte der Ausdruck clamp() niemals Grenzen aufrufen. Wenn wir jedoch unsere Meinung ändern (wir wollen dies tun), bevorzuge ich es, clamp() zu behalten, da implizite Grenzen schwer zu finden und aufrechtzuerhalten sind.

Schaden vermeiden

Wir können denken, dass unsere Arbeit erledigt ist, aber wir haben es nicht getan. Das Layout ist immer noch nicht sehr nützlich. Der Text befindet sich direkt über dem Kopf der Mungo. Ich bin zwar garantiert, dass dies den Mongoose nicht schaden wird, aber ich mag das Aussehen nicht. Nehmen wir also einige Änderungen vor, um zu verhindern, dass der Text auf die Mongoose schlägt.

Der erste ist sehr einfach. Wir bewegen die Mongoose schneller nach links, damit er Weg macht. Am einfachsten ist es, das untere Ende der Interpolation in einen breiteren Behälter zu ändern. Wir werden es so einstellen, dass sich der Mongoose mit 450 PX vollständig nach links bewegt, anstatt auf 360px abzusteigen. Es gibt keinen Grund, warum die Start- und Endpunkte aller unserer Flüssigkeitsausdrücke mit der gleichen Breite ausgerichtet werden müssen, damit wir die anderen Ausdrücke auf 360px reibungslos senken können.

Mit meinem zuverlässigen Taschenrechner müssen wir nur den Ausdruck der Eigenschaft von Hintergrundpositionen ändern: clamp()

<div>
  <div>
    <h1>LookOut</h1>
    <p>Eagle Defense System</p>
  </div>
</div>

Dies verbessert die Situation, aber nicht vollständig. Ich möchte es nicht schneller bewegen, also schauen wir uns als nächstes den Pfad zum Text an. Derzeit bewegt es sich in einer geraden Linie, wie unten gezeigt:

Aber können wir es biegen? Ja, wir können.

Biegen Sie im Pfad

Eine Möglichkeit, dies zu tun, besteht darin, zwei verschiedene Interpolationen für die Top -Koordinaten zu definieren, die Linie in verschiedenen Winkeln zu platzieren und dann die kleinste auszuwählen. Auf diese Weise können steilere gerade Linien bei größeren Behälterbreiten "gewinnen", während flachere gerade Linien zum Gewinnwert werden, wenn die Containerbreite weniger als 780px beträgt. Das Ergebnis ist eine gerade Linie mit einer Kurve, die den Mongoose verfehlt.

wir ändern nur den

-Werteil, aber wir müssen zuerst zwei Zwischenwerte berechnen: top

#hero {
  container-type: inline-size;
  max-width: 1200px;
  min-width: 360px;

  .details {
    position: absolute;
    z-index: 2;

    top: 220px;
    left: 565px;

    h1 { font-size: 5rem; }

    p { font-size: 2.5rem; }
  }

  &::before {
    content: '';
    position: absolute;
    z-index: 1;

    top: 0; left: 0; right: 0; bottom: 0;

    background-image: url(../meerkat.jpg);
    background-origin: content-box;
    background-repeat: no-repeat;

    background-position-x: 0;
    background-position-y: 0;
    background-size: auto 589px;
  }
}

Für diese Werte habe ich die Endpunkte ausprobiert, bis ich das gewünschte Ergebnis erhielt, anstatt sie formell mit sorgfältig ausgewählten Mittelpunkten zu berechnen. Experimente sind so wirksam wie Berechnungen und können die Ergebnisse erzielen, die Sie benötigen. In diesem Fall beginne ich mit wiederholter Interpolation in einer benutzerdefinierten Variablen. Ich hätte den Pfad unter Verwendung einer Containerabfrage in explizite Teile aufteilen können, aber dies verringert den Mathematik -Overhead nicht, und die Verwendung der

-Funktion ist in meinen Augen einfacher. Außerdem geht es in diesem Artikel nicht ausschließlich um Containerfragen, oder? min()

Der Text bewegt sich jetzt auf diesem Weg. Öffnen Sie eine Live -Demo, um zu sehen, wie es funktioniert.

CSS kann nicht alles

machen

Der letzte Punkt der Erklärung zur Berechnung ist, dass es Einschränkungen hinsichtlich dessen gibt, was wir können und was nicht. Das erste, das wir bereits leicht gelindert haben, dh diese Interpolationen sind linear. Dies bedeutet, dass das Verblassen oder ein anderes komplexes Verhalten unmöglich ist.

Eine weitere wichtige Einschränkung besteht darin, dass CSS nur auf diese Weise Längenwerte erzeugen können, so dass in reinem CSS nicht in reiner CSS angewendet werden kann, dass Flüssigkeits- oder Rotationswinkel angewendet werden können. Der Präprozessor kann uns auch hier nicht helfen, da die Einschränkung darin besteht, wie calc() im Browser funktioniert.

Wenn Sie bereit sind, sich auf eine kleine Menge JavaScript zu verlassen, können Sie beide Einschränkungen rückgängig machen. Es reicht aus, um die Breite des Behälters zu beobachten und eine einheitlose CSS -Eigenschaft einzustellen. Ich werde dies verwenden, um den Text wie folgt einer quadratischen Bezier -Kurve zu befolgen:

Es gibt zu viele Codes, um aufgelistet zu werden, und es gibt zu viele mathematische Erklärungen für Bezier-Kurven, aber bitte überprüfen Sie es in der Echtzeitdemonstration.

Wenn ein Ausdruck wie calc(1vw / 1px) in CSS nicht versagt, brauchen wir nicht einmal JavaScript. Sie haben keinen Grund zu scheitern, weil sie das Verhältnis zwischen zwei Längen darstellen. Genauso wie es 2,54 cm in 1 Zoll gibt, wenn die Ansichtsfensterbreite 800px beträgt, gibt es 8px in 1 VW, so dass calc(1vw / 1px) als 8 Werte ohne Einheiten berechnet werden sollte.

Aber sie scheitern, also können wir nur unseren Standpunkt angeben und weitermachen.

Flüssigkeit alles löst nicht alle Layouts

Natürlich gibt es immer einige Layouts, die Größenabfrage erfordern. Gegebenenfalls gibt es keinen Grund, dies zu vermeiden. Es gibt auch keinen Grund, das Mischen der beiden zu vermeiden, beispielsweise durch reibungslose Anpassung der Hintergrundgröße und -position, während Abfragen zum Wechsel zwischen Gitterdefinitionen der Textplatzierung wechseln. Mein Mongoose -Beispiel ist absichtlich als einfach für Demonstrationszwecke ausgelegt.

Ich möchte hinzufügen, dass ich sehr aufgeregt bin, dass die Möglichkeit der Flüssigkeitspositionierung mit der neuen Ankerpositionierungs -API. Es ist möglich, die Ankerpositionierung zu verwenden, um zu definieren, wie zwei Elemente zusammen auf dem Bildschirm fließen. Dies muss jedoch später diskutiert werden.

Das obige ist der detaillierte Inhalt vonFluid alles andere. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!