Heim > Artikel > Web-Frontend > So erstellen Sie ein responsives H5-Webdesign

So erstellen Sie ein responsives H5-Webdesign

php中世界最好的语言Original: 2018-01-11 09:56:183899Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie H5-Responsive-Webdesign erstellen. Was sind die Vorsichtsmaßnahmen für H5-Responsive-Webdesign?

Dieser Artikel stellt die Implementierung von HTML5-responsivem (adaptivem) Webdesign vor und teilt sie mit allen. Die Details sind wie folgt:

Schritt 1: Fügen Sie dem Kopf eine Zeile mit Viewport-Meta-Tags hinzu des Webseitencodes.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Ansichtsfenster ist die Standardbreite und -höhe der Webseite. Die obige Codezeile bedeutet: Die Breite der Webseite ist gleich Die Bildschirmbreite ist standardmäßig (width=device-width), original Das Skalierungsverhältnis (initial-scale=1) beträgt 1,0, dh die anfängliche Größe der Webseite nimmt 100 % der Bildschirmfläche ein.

Alle gängigen Browser unterstützen diese Einstellung, einschließlich IE9. Für diese alten Browser (hauptsächlich IE6, 7, 8) müssen Sie css3-mediaqueries.js verwenden

<!--[if lt IE 9]> 
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

Schritt 2: (Hinweis) Verwenden Sie keine absolute Breite und Schriftgröße

width:auto; / width:XX%;

Schritt 3: (Hinweis) Schriftgröße

Die Schriftgröße beträgt 100 % der Standardgröße der Seite, also 16 Pixel

Verwenden Sie nicht die absolute Größe „PX“ Verwenden Sie für Schriftarten die relative Größe „REM“

Schritt 4: Flusslayout

Die Bedeutung von „fließen“. Layout" ist, dass jeder Bereich Die Positionen der Blöcke sind alle schwebend und nicht fixiert

Der Vorteil besteht darin, dass, wenn die Breite zu klein ist, um zwei Elemente aufzunehmen, das folgende Element automatisch an das Ende des vorherigen scrollt Element und wird nicht horizontal sein. Richtung Überlauf (Überlauf) verhindert das Erscheinen horizontaler Bildlaufleisten

Schritt 5: Wählen Sie, ob CSS geladen werden soll

Der Kern des „adaptiven Webdesigns“. „ist die Einführung des CSS3 Media Query-Moduls. Erkennen Sie die Bildschirmbreite automatisch und laden Sie dann die entsprechende CSS-Datei.

<style type="text/css"> 
img{ max-width:100%;} 
video{ max-width:100%; height:auto;} 
header ul li{ float:left; list-style:none; list-style-type:none; margin-right:10px;} 
header select{display:none;} 
@media (max-width:960px){ 
    header ul{ display:none;} 
    header select{ display:inline-block;} 
} 
</style> 
<body> 
<header> 
    <ul> 
        <li><a href="#" class="active">Home</a></li> 
        <li><a href="#">AAA</a></li> 
        <li><a href="#">BBB</a></li> 
        <li><a href="#">CCC</a></li> 
        <li><a href="#">DDD</a></li> 
    </ul> 
    <select> 
        <option class="selected"><a href="#">Home</a></option> 
        <option value="/AAA">AAA</option> 
        <option value="/BBB">BBB</option> 
        <option value="/CCC">CCC</option> 
        <option value="/DDD">DDD</option> 
    </select> 
</header> 
</body>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum PHP-Chinesen Webseite!

Verwandte Lektüre:

So implementieren Sie die Drag-and-Drop-Funktion in H5

H5-Tag-Zusammenfassung auf Blockebene

So gehen Sie mit der Inkompatibilität älterer Browserversionen mit H5 und C3 um

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

Stellungnahme：

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

Vorheriger Artikel：So implementieren Sie einen farbenfrohen Ring-Countdown mit SVGNächster Artikel：So implementieren Sie einen farbenfrohen Ring-Countdown mit SVG

In Verbindung stehende Artikel

Mehr sehen