Im Frontend-Layout gibt es ein Layout namens adaptives Layout. Was bedeutet also adaptives Layout? Wie implementiert man ein adaptives Layout? In diesem Artikel werden Ihnen die Bedeutung des adaptiven Layouts und die Implementierungsmethode des adaptiven Layouts vorgestellt.
Lass uns zunächst einen Blick auf Was ist adaptives Layout werfen.
Das sogenannte adaptive Layout, wir können die folgende Definition von Baidu finden, bezieht sich auf neue Webdesign-Methoden und -Technologien, die eine adaptive Anzeige von Webseiten auf Endgeräten unterschiedlicher Größe ermöglichen. Einfach ausgedrückt besteht Anpassungsfähigkeit darin, dieselbe Seite automatisch an Geräte unterschiedlicher Größe anzupassen und so das Problem zu lösen, unterschiedliche Versionen von Seiten für verschiedene Geräte bereitzustellen.
Da wir nun wissen, was adaptives Layout ist, werfen wir einen Blick darauf, wie man adaptives Layout implementiert?
Das adaptive Layout der Seite ist in höhenadaptives und breitenadaptives Layout unterteilt. Es gibt tatsächlich viele Implementierungsmethoden. Nehmen wir das dreispaltige Layout als Beispiel, um die Implementierung des adaptiven Layouts zu sehen . Weg.
1. Höhenanpassung des adaptiven Layouts
Bei der Höhenanpassung wird jedes Modul auf absolute Positionierung eingestellt und dann die mittleren Werte automatisch eingestellt Die oberen und unteren Attribute des angepassten Moduls sind die Höhen des Kopfmoduls bzw. des unteren Moduls, und dann wird die Höhe des mittleren Moduls angepasst.
Der höhenadaptive Layoutcode lautet wie folgt:
<body>
<div class="top">120px</div>
<div class="main">自适应</div>
<div class="bottom">120px</div>
</body>.top{
width: 100%;
height: 120px;
position: absolute;
background-color: greenyellow;
}
.main{
position: absolute;
width: 100%;
top: 120px;
bottom: 120px;
background-color: pink;
height: auto;
}
.bottom{
position: absolute;
bottom: 0;//别漏了
width: 100%;
height: 120px;
background-color:greenyellow ;
}Der höhenadaptive Layouteffekt lautet wie folgt:
2 . Adaptive Layout-Breitenanpassung
Es gibt drei Möglichkeiten, die Breite anzupassen: Durch die Verwendung der absoluten Positionierung wird zuerst das mittlere Modul gerendert.
Werfen wir einen Blick auf das adaptive Layout (drei Spalten), das jeweils durch diese drei Methoden implementiert wird
1. Verwenden Sie die absolute Positionierung, um das adaptive Breitenlayout festzulegen.
Erläuterung: Verwenden Sie die absolute Positionierung für das adaptive Modul und stellen Sie links und rechts die Breite der linken und rechten Spalte ein Prinzip und Höhe werden automatisch angepasst. Die Anpassung ist dieselbe, und die linke und rechte Spalte schweben jeweils nach links und rechts.
Der Breitenanpassungslayoutcode für die Einstellung der absoluten Positionierung lautet wie folgt:
<body>
<div class="left">200px</div>
<div class="main">自适应</div>
<div class="right">200px</div>
</body>rrreeDer Breitenanpassungslayouteffekt ist wie folgt folgt:
2. Mit margin wird zuerst das mittlere Modul gerendert, um das breitenadaptive Layout festzulegen
Hinweis : Die mittlere Spalte wird zuerst gerendert. Der Schlüssel zum adaptiven dreispaltigen Layout und zum Prioritätsrendering (Laden): Der Inhalt muss in HTML zuerst platziert werden. Das adaptive Div muss vor links und rechts platziert und in einem übergeordneten Div enthalten sein. Das übergeordnete Div, das linke und das rechte Modul schweben alle nach links und setzen dann margin: 0 200px für das adaptive Div (dh das untergeordnete Div im übergeordneten Div) und setzen dann den Attributwert margin-left von left auf eine negative Zahl von 100 % ist margin-left: -100 %; setzen Sie den Attributwert von margin-left von right auf die negative Zahl seiner eigenen Breite, also margin-left: -200px.
Hinweis: Das adaptive Div muss vor links und rechts platziert und in ein übergeordnetes Div eingebunden werden.
Mit margin rendert das Zwischenmodul zunächst den Code zum Festlegen des breitenadaptiven Layouts wie folgt:
html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.left,
.right {
width: 200px;
display: inline;
height: 100%;
background-color: greenyellow;
}
.left {
float: left;
}
.right {
float: right;
}
.main {
position: absolute;
left: 200px;
right: 200px;
height: 100%;
background-color: pink;
display: inline;
}<body>
<div class="main"> <!--看清楚，这里用一个父div包住-->
<div class="content">自适应</div>
</div>
<div class="left">200px</div>
<div class="right">200px</div>
</body>Der Effekt des breitenadaptiven Layouts ist wie folgt folgt:
3. Verwenden Sie ein eigenes Floating, um das breitenadaptive Layout festzulegen
Beschreibung: Einstellung der mittleren Spalte Das Randattribut dient dazu, die linke bzw. rechte Spalte schweben zu lassen. Hinweis: Wenn Sie diese Methode zum Anpassen des Layouts verwenden, muss die adaptive Spalte links und rechts im HTML platziert werden.
Der Code zum Festlegen des breitenadaptiven Layouts mithilfe seines eigenen Floats lautet wie folgt:
html,
body {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.main {
width: 100%;
height: 100%;
float: left;
}
.main .content {
margin: 0 200px;
background-color: pink;
height: 100%;
}
.left,
.right {
width: 200px;
height: 100%;
float: left;
background-color: greenyellow;
}
.left {
margin-left: -100%; //important
}
.right {
margin-left: -200px; //important
}rrreeDer Effekt des breitenadaptiven Layouts ist wie folgt:
Abschließend:
Dieser Artikel endet hier Weitere Informationen zum adaptiven Layout finden Sie unter die neuesten 8 empfohlenen responsiven und adaptiven Video-Tutorials im Jahr 2018 , die die neuesten kostenlosen Video-Tutorials enthalten, die Sie ansehen können.
Das obige ist der detaillierte Inhalt vonWas ist adaptives Layout? Wie implementiert man ein adaptives Layout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
HTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchApr 12, 2025 am 12:02 AMWebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
Die Rolle von HTML: Strukturierung von WebinhaltenApr 11, 2025 am 12:12 AMDie Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.
HTML und Code: Ein genauerer Blick auf die TerminologieApr 10, 2025 am 09:28 AMHtmlisaspecifictypeofcodeFocusedonstructuringuringwebcontent, während "Code" breitincludesluages -ähnlichjavaScriptandpythonforfunctionality.1) htmldefineswebpageStructureStags.2) "Code" cometesaWiNrangeOfLanguagesForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForForfirsInsForfunctionNacts
HTML, CSS und JavaScript: Wesentliche Tools für WebentwicklerApr 09, 2025 am 12:12 AMHTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
Die Rollen von HTML, CSS und JavaScript: KernverantwortungApr 08, 2025 pm 07:05 PMHTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Ist HTML für Anfänger leicht zu lernen?Apr 07, 2025 am 12:11 AMHTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Was ist ein Beispiel für ein Start -Tag in HTML?Apr 06, 2025 am 12:04 AMAnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
Wie kann ich das Flexbox -Layout von CSS verwenden, um eine zentrale Ausrichtung des Segmentierungseffekts für gepunktete Linien im Menü zu erzielen?Apr 05, 2025 pm 01:24 PMWie gestalte ich den Segmentierungseffekt der gepunkteten Linien im Menü? Bei der Gestaltung von Menüs ist es normalerweise nicht schwierig, links und rechts zwischen dem Gerichtsnamen und dem Preis von Schalen auszurichten, aber wie wäre es mit der gepunkteten Linie oder dem Punkt in der Mitte ...
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.
SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
Dreamweaver Mac
Visuelle Webentwicklungstools
SublimeText3 Linux neue Version
SublimeText3 Linux neueste Version
