So implementieren Sie ein responsives Layout

1. Responsives Layout: Kurz gesagt, eine Website kann mit mehreren Terminals kompatibel sein – anstatt für jedes Terminal eine spezifische Version zu erstellen. Dieses Konzept wurde geboren, um das mobile Surfen im Internet zu lösen.

Drei Möglichkeiten zur Implementierung eines responsiven Layouts

1. CSS3-Medienabfrage (Der einfachste Weg, aber nicht erreichbar viele Bedürfnisse)

2. Verwenden Sie natives Javascript (hohe Kosten, nicht empfohlen)

3. Open-Source-Frameworks von Drittanbietern (wie Bootstrap, die das responsive Layout des Browsers gut unterstützen können)

3, gemeinsame CSS3-Media-Query-Attribute

Gerätebreite, Gerätehöhe Bildschirmbreite und -höhe

Breite, Höhe Breite und Höhe des Rendering-Fensters

Ausrichtung Geräteausrichtung

Auflösung Geräteauflösung

4, CSS3-Media Query grundlegende Syntax

Syntax von externem CSS und Inline-Stilen

Beispiel: externes Stylesheet link.css (der Hintergrund ist rot, wenn die Bildschirmbreite kleiner oder gleich 480 Pixel ist)

                                                                                                                           who's who who's who who' who's Die Syntax von link.css besteht nur aus einem Satz: body{background: red;}

5, Bootstrap

Um Bootstrap zu verwenden, müssen Sie CSS- und JS-Dateien importieren, insgesamt drei , und die Reihenfolge kann nicht umgekehrt werden (Versionen können geändert werden), wie unten gezeigt

            <script src="js/jquery.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/bootstrap.min.js"></script>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein responsives Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!