Was bedeutet HTML5-Responsive-Design?

HTML5-Responsive-Design bedeutet, ein prozentuales Layout zu verwenden, um eine flüssige und flexible Benutzeroberfläche zu erstellen, während Medienabfragen verwendet werden, um die sich ändernde Auswahl an Elementen zu begrenzen. Das Konzept des Responsive-Designs basiert auf einem flüssigen Layout, flexiblen Bildern, flexiblen Tabellen, flexiblen Videos und Medien Abfragen Eine Kombination von Technologien.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, HTML5-Version, Dell G3-Computer.

Was bedeutet HTML5-Responsive-Design?

Was ist Responsive:

Das Responsive-Design-Konzept basiert auf einer Kombination von Technologien wie flüssigem Layout, elastischen Bildern, elastischen Tabellen, elastischen Videos und Medienabfragen. Durch die Verwendung eines prozentualen Layouts zur Schaffung einer flüssigen und flexiblen Benutzeroberfläche und die Verwendung von Medienabfragen zur Begrenzung des sich ändernden Bereichs von Elementen bildet die Kombination der beiden den Kern des responsiven Designs.

Was ist Viewport:

Viewport ist ein sehr wichtiges Konzept im responsiven Design. Das Konzept des Ansichtsfensters ist in zwei Arten von Ansichtsfenstern für mobile Browser unterteilt: Das eine ist das sichtbare Ansichtsfenster, das die Größe des Geräts angibt, und das andere ist das Fenster-Ansichtsfenster, das die Breite der Webseite angibt.

e8e496c15ba93d81f6ea4fe5f55a2244-Tag

In HTML5 kann das e8e496c15ba93d81f6ea4fe5f55a2244-Tag verwendet werden, um Ansichtsfenstereigenschaften zu konfigurieren.

Grundlegende Syntax:

  <meta name="viewport" content="uesr-scalable=no, width=device-width,initial-scale=1.0,maximum-scale=1.0">

Attributerklärung:

uesr-scalable=no: wird verwendet, um festzulegen, ob der Benutzer kann Zoomen, der Standardwert ist ja

width=device-width: wird zum Festlegen der Breite des Fensteransichtsfensters verwendet, was hier dasselbe bedeutet wie die Breite des sichtbaren Ansichtsfensters

initial-scale=1.0: wird zum Festlegen der verwendet anfängliches Skalierungsverhältnis, der Wert ist 0 ·10,0

maximum-scale=1,0: wird verwendet, um das minimale Zoomverhältnis festzulegen, der Wert ist 0·10,0

height: wird verwendet, um die Breite des Fensteransichtsfensters festzulegen

minimum-scale : wird verwendet, um das minimale Zoomverhältnis festzulegen

Medienabfragen

In der CSS3-Spezifikation können Medienabfragen den Anzeigemodus der Seite basierend auf Unterschieden in der Breite des Ansichtsfensters, der Geräteausrichtung usw. ändern. Medienabfragen bestehen aus Medientypen und bedingten Ausdrücken.

Der Beispielcode lautet wie folgt:

@media screen and(max-width:960px){
               /*样式设置：表示媒体类型screen并且屏幕宽度小于等于960px时的样式*/
  }

Prozentsatz-Layout:

Festes Layout (in Pixel) kann in prozentuale Breite konvertiert werden, um prozentuales Layout zu implementieren:

Die Umrechnungsformel lautet: Zielelementbreite/Breite des übergeordneten Felds =Prozentuale Breite

(Teilen von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas bedeutet HTML5-Responsive-Design?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!