Über Medienabfragen hinaus: Verwenden neuerer HTML & CSS -Funktionen für reaktionsschnelle Designs

Responsive Webdesign geht über Medienabfragen und moderne CSS -Layouts wie Flexbox und Grid hinaus. In diesem Artikel werden häufig übersehene HTML- und CSS-Techniken zur Erstellung von wirklich reaktionsschnellen Websites untersucht, wodurch die Abhängigkeit von Medienabfragen für einen natürlicheren und effizienteren Ansatz minimiert wird.

Medienabfragen werden in Verbindung mit diesen erweiterten Funktionen ergänzend. Lassen Sie uns untersuchen, wie.

Wirklich reaktionsschnelle Bilder: Jenseits width: 100%

Während width: 100% das Bildänderungsgröße vereinfacht, hat es Nachteile: Bildverzerrung und unnötige große Downloads auf kleineren Geräten. Die Optimierung der Bildauflösung und -größe ist für die Leistung von entscheidender Bedeutung. Hochauflösende Bilder sollten größeren Bildschirmen und Versionen mit niedrigerer Auflösung zu kleineren Versionen bedient werden.

Der<picture></picture> Element bietet eine präzise Auswahl der Bildressourcen basierend auf Medienabfragen. Anstatt ein einzelnes großes Bild zu skalieren, geben wir mehrere Bildversionen für verschiedene Szenarien an.

<picture>
  <source media="(min-width: 1000px)" srcset="picture.png">
  <source media="(min-width: 601px)" srcset="picture-lg.png">
  <source media="(min-width: 401px)" srcset="picture-sm.png">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939320557.png?x-oss-process=image/resize,p_40" class="lazy" alt="Über Medienabfragen hinaus: Verwenden neuerer HTML & CSS -Funktionen für reaktionsschnelle Designs">
</source></source></source></picture>

In diesem Beispiel wird picture-sm.png als Fallback verwendet. Medienabfragen zielen auf spezifische Ansichtsfenster -Breiten ab und wählen geeignete Bilder aus. Wir können auch die Bilddichte (1x, 2x, 3x) in das srcset -Attribut zur weiteren Optimierung einbeziehen.

Der <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174358939433455.png?x-oss-process=image/resize,p_40" class="lazy" alt="Über Medienabfragen hinaus: Verwenden neuerer HTML & CSS -Funktionen für reaktionsschnelle Designs"> <h3 id="Device-Resolution-Based-Styling-with-CSS-Media-Queries">Device Resolution-Based Styling with CSS Media Queries</h3> CSS-Medienabfragen können nicht nur die Größe der Bildschirmauflösung (DPI) als nur die Größe der Ansichtsfenster abzielen:

 @media nur Bildschirm und (min-Auflösung: 192dpi) {
  / * Stil für hochauflösende Bildschirme *//
}

Dies ermöglicht es, hochwertige Bilder zu hochauflösenden Bildschirmen zu bedienen. Es wird jedoch empfohlen, sich ausschließlich auf die Auflösung auf die Auflösung zu stützen.

Beispiel:

 Körper {
  Hintergrundbild: URL (picture-md.png); / * Standardbild *//
}

@media nur Bildschirm und (min-Auflösung: 192dpi) {
  Körper {
    Hintergrundbild: URL (picture-lg.png); / * Hochauflösendes Bild */
    Objekt-Fit: Deckung;
    Objektposition: 100% 150%; / * Fokusspunkt einstellen *//
  }
}

Die Eigenschaften für object-fit und object-position bieten eine feinkörnige Kontrolle über Bildbilder- und Schwerpunkte.

CSS -Funktionen: min() , max() und clamp()

• min() : Legt eine Mindestgröße für ein Element fest. Nützlich, um zu verhindern, dass Text unleserlich wird:

   html {
    Schriftgröße: min (1rem, 22px); / * Schriftgröße zwischen 16px und 22px */
  }

• max() : Legt eine maximale Größe für ein Element fest:

   .Kasten {
    Breite: max (60%, 600px); / * Breite höchstens 60% oder 600px */
  }

• clamp() : kombiniert min() und max() , liefert ein minimales, bevorzugtes und maximaler Wert:

   .Kasten {
    Schriftgröße: Clamp (1REM, 40px, 4REM); / * Schriftgröße innerhalb eines Bereichs */
  }

Responsive Einheiten: jenseits von Pixeln

Responsive Design profitiert von relativen Einheiten:

• vw / vh : Ansichtsfenster / Höhe.
• rem : Relativ zur Schriftgröße des Stammelements.
• em : Verhältnis zur Schriftgröße des übergeordneten Elements.
• % : Relativ zur Größe des übergeordneten Elements.

rem -Einheiten skalieren mit Änderungen der Browser -Schriftgröße, wodurch eine konsistente Skalierung bereitgestellt wird. em -Einheiten bieten eine stärkere Kontrolle auf der Grundlage von Elternelementgrößen. vw und vh sind direkt an Ansichtsfenster gebunden.

Übergehen über Medienfragen hinaus: ein ganzheitlicher Ansatz

Diese HTML- und CSS -Funktionen bieten eine verbesserte Kontrolle über die Reaktionsfähigkeit und ergänzen sich eher um Medienabfragen. Sie bieten eine feineren Kontrolle über die Benutzererfahrung über verschiedene Geräte und Bildschirmgrößen hinweg. Durch die Nutzung dieser Techniken können Entwickler robustere und effizientere Reaktionsdesigns schaffen.

Das obige ist der detaillierte Inhalt vonÜber Medienabfragen hinaus: Verwenden neuerer HTML & CSS -Funktionen für reaktionsschnelle Designs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!