Heim >Web-Frontend >CSS-Tutorial >Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS
Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS
青灯夜游nach vorne
2020-11-24 17:47:213443Durchsuche
Neben der Verwendung von Medienabfragen und modernen CSS-Layouts wie Flexbox und Grid zum Erstellen responsiver Websites gibt es bestimmte übersehene Dinge, die wir tun können, um responsive Websites zu erstellen. In diesem Artikel untersuchen wir die vielen verfügbaren Tools (rund um HTML und CSS), von responsiven Bildern bis hin zu relativ neuen CSS-Funktionen, die unabhängig davon funktionieren, ob wir Medienabfragen verwenden oder nicht.
Tatsächlich werden Medienabfragen, wenn sie zusammen mit diesen Funktionen verwendet werden, eher zu einer Ergänzung als zu einem vollständigen Ansatz. Mal sehen, wie es funktioniert.
True Responsive Images
Erinnern Sie sich noch an die Zeit, als wir width: 100% einfach fest in ein Bild kodieren konnten und Schluss machen konnten? Dies ist natürlich immer noch effektiv und macht das Bild flexibler, bringt aber auch einige Nachteile mit sich, von denen die offensichtlichsten sind: width: 100% ,然后就可以下班了吗?当然,这样做还是有效果的,也确实能让图片变得更有弹性,但也会带来一些弊端,其中最明显的包括:
<picture>
<source>
<source>
<source>
<img alt="Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS" >
</source></source></source></picture>
<picture>
<source>
<source>
<source>
<img alt="Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS" >
</source></source></source></picture>
让我们专门看一下嵌套在 <picture></picture> 元素内的两个标签:<source></source> 和 <img alt="Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS" >。
浏览器将查找媒体查询与当前视口宽度匹配的第一个 <source></source> 元素,然后将显示正确的图像(在 srcset 属性中指定)。<img alt="Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS" > 元素是 <picture></picture> 元素的最后一个子元素,如果没有原始源标签匹配,则作为后备选项。
我们还可以使用图像密度通过 srcset 属性仅使用 <img alt="Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS" >
Das Bild kann so verformt werden, dass es den Fokus verliert.
Kleinere Geräte laden weiterhin das Bild in voller Größe herunter.
Bei der Verwendung von Bildern im Web müssen wir darauf achten, dass diese hinsichtlich Auflösung und Größe optimiert sind. Der Grund besteht darin, sicherzustellen, dass wir die richtige Bildauflösung für das richtige Gerät haben, damit wir nicht am Ende sehr große und umfangreiche Bilder für kleinere Bildschirme herunterladen, was die Leistung der Website beeinträchtigen könnte. Einfach ausgedrückt möchten wir sicherstellen, dass größere Bilder mit hoher Auflösung an große Bildschirme gesendet werden, während kleinere Änderungen mit niedriger Auflösung an kleine Bildschirme gesendet werden, um so die Leistung und das Benutzererlebnis zu verbessern. HTML stellt das Element <picture></picture> bereit, mit dem wir die genaue Bildressource angeben können, die basierend auf der hinzugefügten Medienabfrage gerendert werden soll. Wie bereits erwähnt, senden wir nicht ein Bild (normalerweise eine große, hochauflösende Version) an alle Bildschirmgrößen und skalieren es auf die Breite des Ansichtsfensters, sondern geben einen Satz Bilder an, die für eine bestimmte Situation verwendet werden.
<img alt="Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS" >
In diesem Beispiel ist picture.png das Bild in voller Größe. Von dort aus definieren wir die nächstgrößere Version des Bildes, picture-lg.png, wobei die Größen bis zur kleinsten Version, picture-sm.png, abnehmen. Beachten Sie, dass wir bei diesem Ansatz immer noch Medienabfragen verwenden, aber es ist das <picture></picture>-Element selbst, das das Reaktionsverhalten steuert, und nicht die Definition von Haltepunkten in CSS. 🎜🎜Medienabfragen wurden entsprechend hinzugefügt, um sie an die Bildgröße anzupassen: 🎜
Ansichtsfenster mit 1000 Pixeln und höher erhalten picture.png.
Ansichtsfenster zwischen 601 Pixel und 999 Pixel erhalten picture-lg.png.
Ansichtsfenster zwischen 401 Pixel und 600 Pixel erhalten picture-sm.png.
Alles, was kleiner als 400 Pixel ist, erhält picture-sm.png.
🎜Interessanterweise können wir jedes Bild auch nach der Bilddichte nach der URL kennzeichnen – 1x, 2x, 3x usw. Es wäre in Ordnung, wenn wir die verschiedenen Bilder so proportionieren würden, dass der Browser anhand der Pixeldichte des Bildschirms und der Größe des Ansichtsfensters entscheiden könnte, welche Version er herunterladen möchte. Aber beachten Sie, wie viele Bilder wir letztendlich definiert haben: 🎜
@media only screen and (max-width: 600px) {
/* Style stuff */
}
🎜 Schauen wir uns speziell die beiden Tags an, die im <picture></picture>-Element verschachtelt sind:
Das obige ist der detaillierte Inhalt vonImplementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!