Was ist ein responsives Layout?
Responsives Layout bedeutet, dass dieselbe Seite auf unterschiedlichen Bildschirmgrößen unterschiedliche Layouts hat. Heutzutage, da das mobile Internet hoch entwickelt ist, können die Webseiten, die wir in Desktop-Browsern entwickeln, den Anforderungen der Anzeige auf mobilen Geräten nicht mehr gerecht werden. Die traditionelle Entwicklungsmethode besteht darin, einen Seitensatz auf der PC-Seite und einen weiteren Seitensatz auf der mobilen Seite zu entwickeln. Dies ist jedoch sehr mühsam. Da es immer mehr unterschiedliche Terminals gibt, müssen Sie mehrere verschiedene Versionen der Seite entwickeln. Um ein responsives Layout zu verwenden, müssen Sie nur einen Satz entwickeln. EthanMarcotte schlug im Mai 2010 das Konzept des responsiven Layouts vor. Kurz gesagt, eine Website kann mit mehreren Terminals kompatibel sein.
Der Unterschied zwischen reaktionsfähiger Entwicklung und separater Entwicklung für Mobilgeräte und PC: Responsive Entwicklung schreibt nur eine Reihe von Schnittstellen und zeigt unterschiedliche Layouts und Inhalte an, indem die Auflösung des Ansichtsfensters erkannt und die Codeverarbeitung auf dem Client für verschiedene Clients durchgeführt wird. Das mobile Endgerät und das PC-Terminal werden separat entwickelt. Durch die Erkennung der Viewport-Auflösung kann festgestellt werden, ob es sich bei dem aktuell aufgerufenen Gerät um einen PC, ein Tablet oder ein Mobiltelefon handelt, wodurch eine Anfrage an den Server gestellt wird und unterschiedliche Seiten zurückgegeben werden.
Was ist das Prinzip der responsiven Entwicklung?
Das Prinzip der reaktionsfähigen Entwicklung besteht darin, mithilfe von Media Query in CSS3 unterschiedliche Layouts und Stile für Geräte unterschiedlicher Breite festzulegen, um sie an unterschiedliche Geräte anzupassen.
Definition und Verwendung der SS3 @media-Abfrage:
Mithilfe der @media-Abfrage können Sie unterschiedliche Stile für unterschiedliche Medientypen definieren. @media kann verschiedene Stile für unterschiedliche Bildschirmgrößen festlegen. Insbesondere wenn Sie eine responsive Seite einrichten müssen, ist @media sehr nützlich. Wenn Sie die Browsergröße zurücksetzen, wird die Seite auch basierend auf der Breite und Höhe des Browsers neu gerendert.
Wenn die Bildschirmbreite beispielsweise weniger als 500 Pixel beträgt, ändern Sie die Hintergrundfarbe in Rot.
Zu den häufig verwendeten Methoden zur Implementierung eines responsiven Layouts gehören die folgenden:
(1) Verwenden Sie Medienabfragen in CSS (am einfachsten);
(2) Verwenden Sie JavaScript (die Nutzungskosten sind relativ hoch);
(3) Verwenden Sie Open-Source-Frameworks von Drittanbietern (z. B. Bootstrap, das verschiedene Browser unterstützen kann).
Meta-Tag festlegen
Zuerst müssen wir das Meta-Tag festlegen, um den Browser anzuweisen, die Breite des Ansichtsfensters (den sichtbaren Bereich der Webseite) der Breite des Geräts anzupassen und dem Benutzer das Vergrößern der Seite zu verbieten unten dargestellt:
<metaname=viewportcontent=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no>
Beim Festlegen des Ansichtsfensters müssen Sie auf die Größe des sichtbaren Bereichs der Webseite achten. Beim Festlegen des Ansichtsfensters müssen Sie sich nicht um die Höhe kümmern Die Höhe wird automatisch um den Inhalt der Webseite erweitert. Die Bedeutung des Inhalts im obigen Meta-Tag ist wie folgt:
● Ansichtsfenster: Ansichtsfenster, das den sichtbaren Bereich der Webseite darstellt;
●width: Steuert die Größe des Ansichtsfensters. Sie können einen bestimmten Wert angeben, z. B. 600, oder einen speziellen Wert, der aus Schlüsselwörtern besteht. Beispielsweise stellt „device-width“ die Breite des Geräts dar.
●Anfangsskalierung: Gibt das anfängliche Skalierungsverhältnis an, d. h. das Skalierungsverhältnis beim ersten Laden der Seite.
●maximum-scale: Gibt das maximale Verhältnis an, in das der Benutzer hineinzoomen darf, im Bereich von 0 bis 10,0;
●Minimaler Maßstab: Gibt an, dass Benutzer auf den minimalen Maßstab zoomen dürfen, der zwischen 0 und 10,0 liegt.
●Benutzerskalierbar: Gibt an, ob der Benutzer manuell zoomen kann. „Ja“ bedeutet, dass die Skalierung zulässig ist, „Nein“ bedeutet, dass die Skalierung verboten ist.
Medienanfragen
CSS-Medienabfragen können basierend auf bestimmten Bedingungen unterschiedliche CSS-Stile für verschiedene Medientypen (Siebdruck) definieren, sodass Benutzer, die verschiedene Geräte verwenden, das beste Erlebnis erhalten.
Verwenden Sie HTML als Beispiel:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metaname=viewportcontent=width=device-width,initial-scale=1><title>Einführungs-Tutorial zur responsiven Seite: Albert Yang</title><linkrel =stylesheethref=style.css><linkrel=stylesheethref=https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.cssintegrity=sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQV. nNcrossorigin=anonym>< / head><body><header><ahref=#>AlbertYang</a><ul><li><ahref=#>Homepage</a></li><li><ahref=#>Blog</ a ></li><li><ahref=#>Kontaktieren Sie mich</a></li><li><ahref=#>Message Board</a></li><li><ahref=#> Über mich</a></li><li><ahref=#>Fotowand</a></li></ul><div><inputtype=textplaceholder=Search><iclass=fafa-searcharia-hidden = true></i></div></header><div><div><h2>Responsives Layout</h2><p>Responsives Layout bedeutet, dass dieselbe Seite unterschiedliche Layouts in verschiedenen Bildschirmgrößen hat. Die traditionelle Entwicklungsmethode besteht darin, einen Satz für den PC und einen anderen Satz für das Mobiltelefon zu entwickeln. Wenn Sie jedoch ein responsives Layout verwenden, müssen Sie nur einen Satz entwickeln. Der Unterschied zwischen Responsive Design und Adaptive Design: Responsive Design entwickelt eine Reihe von Schnittstellen und zeigt unterschiedliche Layouts und Inhalte an, indem es die Auflösung des Ansichtsfensters erkennt und die Codeverarbeitung auf der Clientseite für verschiedene Clients durchführt Durch Erkennen der Auflösung des Ansichtsfensters wird festgestellt, ob es sich bei dem aktuell aufgerufenen Gerät um einen PC, ein Tablet oder ein Mobiltelefon handelt. Dadurch wird die Dienstschicht angefordert und verschiedene Seiten zurückgegeben. Mithilfe von CSS3-Medienabfragen können wir verschiedene Stile für verschiedene Medientypen definieren. Wenn die Größe des Browserfensters zurückgesetzt wird, wird die Seite auch basierend auf der Breite und Höhe des Browsers neu gerendert. </p><ahref=#>Lesen Sie den vollständigen Text</a></div><imgsrc=img.png></div></body></html>
Laufergebnisse:
Das Folgende ist ein umfassendes Beispiel, um die Implementierung eines responsiven Layouts zu demonstrieren:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Responsives Layout</title><metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1, Benutzer -scalable=no/><style>*{margin:0px;padding:0px;font-family:Microsoft Yahei;}#head,#foot,#main{height:100px;width:1200px;/*width: 85% ;*/background-color:goldenrod;text-align:center;font-size:48px;line-height:100px;margin:0auto;}#headdiv{display:none;font-size:20px;height:30px ;width :100px;background-color:green;float:right;line-height:30px;margin-top:35px;}#headul{width:80%;}#headulli{width:20%;float:left;text -align :center;list-style:none;font-size:20px;}#main{height:auto;margin:10pxauto;overflow:hidden;}.left,.center,.right{height:600px;line-height :600px ;float:left;width:20%;background-color:red}.center{width:60%;border-left:10pxsolid#FFF;border-right:10pxsolid#FFF;box-sizing:border-box }@; mediaonlyscreenand(max-width:1200px){#head,#foot,#main{width:100%;}}@mediaonlyscreenand(max-width:980px){.right{display:none;}.left{width: 30% ;}.center{width:70%;border-right:hidden;}}@mediaonlyscreenand(max-width:640px){.left,.center,.right{width:100%;display:block;height: 200px; line-height:200px;}.center{border:hidden;border-top:10pxsolid#FFFFFF;border-bottom:10pxsolid#FFFFFF;height:600px;line-height:600px;}#headul{display:none }# headdiv{display:block;}}</style></head><body><div><headerid=head><ul><li>header1</li><li>header2</li><li >header2 </li><li>header2</li><li>header2</li></ul><div>icon</div></header><sectionid=main><divclass=left>left< /div ><divclass=center>center</div><divclass=right>rechts</div></section><footerid=foot>Fußzeile</footer></div></body></html>Laufergebnisse:
