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
青灯夜游
Freigeben: 2020-11-24 17:47:21
nach vorne
3532 Leute haben es durchsucht
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>
Nach dem Login kopieren
Nach dem Login kopieren
让我们专门看一下嵌套在 <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" >
Nach dem Login kopieren
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 */
}
Nach dem Login kopieren
🎜 Schauen wir uns speziell die beiden Tags an, die im <picture></picture>-Element verschachtelt sind: code> und <img alt="Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS" >. 🎜🎜Der Browser sucht nach dem ersten <source></source>-Element, dessen Medienabfrage mit der aktuellen Breite des Ansichtsfensters übereinstimmt, und zeigt das richtige Bild an (angegeben im srcset-Attribut). . Das <img alt="Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS" >-Element ist das letzte untergeordnete Element des <picture></picture>-Elements und dient als Fallback, wenn kein ursprüngliches Quell-Tag übereinstimmt. 🎜🎜🎜🎜uns Es ist auch möglich, die Bilddichte über das Attribut srcset zu verwenden, um reaktionsfähige Bilder nur mit dem Element <img alt="Implementieren Sie ein responsives Layout mit neuen Funktionen von HTML und CSS" > zu verarbeiten: 🎜
@media only screen and (min-resolution: 192dpi) {
/* Style stuff */
}
Nach dem Login kopieren
🎜 Eine andere Sache, die wir tun können, ist CSS basierend auf Schreiben Sie Medienabfragen basierend auf der Bildschirmauflösung des Geräts selbst (normalerweise gemessen in Punkten pro Zoll oder dpi) und nicht nur auf dem Geräteansichtsfenster. Dies bedeutet, dass wir anstelle von: 🎜
body {
background-image : picture-md.png; /* the default image */
}
@media only screen and (min-resolution: 192dpi) {
body {
background-image : picture-lg.png; /* higher resolution */
}
}
Nach dem Login kopieren
Nach dem Login kopieren
🎜 jetzt Folgendes haben: 🎜
@media only screen and (min-resolution: 192dpi) {
body {
background-image : picture-lg.png;
object-fit: cover;
object-position: 100% 150%; /* moves focus toward the middle-right */
}
}
Nach dem Login kopieren
Nach dem Login kopieren
🎜 Dieser Ansatz ermöglicht es uns, basierend auf der Bildschirmauflösung des Geräts selbst zu entscheiden, welches Bild gerendert werden soll, was bei der Arbeit mit hochauflösenden Bildern hilfreich sein kann. Im Grunde bedeutet dies, dass wir auf Bildschirmen, die höhere Auflösungen unterstützen, ein qualitativ hochwertiges Bild und bei niedrigerer Auflösung eine kleinere Version anzeigen können. Es ist erwähnenswert, dass die Bildschirme mobiler Geräte zwar klein sind, ihre Auflösung jedoch in der Regel sehr hoch ist. Das bedeutet, dass es möglicherweise nicht die beste Idee ist, sich bei der Entscheidung, welches Bild gerendert werden soll, ausschließlich auf die Auflösung zu verlassen. Dies kann dazu führen, dass auf einem sehr kleinen Bildschirm ein großes, hochauflösendes Bild angezeigt wird, das möglicherweise nicht die Version ist, die wir auf einem so kleinen Bildschirm tatsächlich anzeigen möchten. 🎜
body {
background-image : picture-md.png; /* the default image */
}
@media only screen and (min-resolution: 192dpi) {
body {
background-image : picture-lg.png; /* higher resolution */
}
}
rem 和 em 单位有什么区别? rem 使用根元素()的字体大小来计算值,而声明 em 值的元素则引用包含它的父元素的字体大小。如果指定的父元素和根元素的大小不同(例如父元素是18px,但根元素是16px),那么em和rem将解析为不同的计算值。这让我们可以更精细地控制我们的元素在不同的响应环境中的响应方式。
看到了吗?我们刚刚看了一些非常强大且相对较新的 HTML 和 CSS 功能,它们为我们提供了额外的(可能更有效的)构建响应性的方法。这并不是说这些新技术取代了我们一直在做的事情。它们只是我们开发者工具带中的更多工具,让我们有更大的控制权来决定元素在不同上下文中的行为。无论是对字体大小、分辨率、宽度、焦点,还是任何事物的处理,我们对用户体验的控制都比以往更加精细。
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!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn