In tatsächlichen Projekten werden Sie immer auf das Problem des responsiven Layouts stoßen. Wenn Sie kein responsives UI-Framework verwendet haben, verwenden Sie im Allgemeinen Medienabfragen, um ein responsives Layout zu implementieren Ich stoße so oft darauf, dass es meiner Meinung nach notwendig ist, es ein wenig zusammenzufassen.
Das erste, was wir verstehen müssen, ist, dass bei Verwendung von Medienabfragen beim Zurücksetzen der Browsergröße die Seite entsprechend der Breite und Höhe des Browsers neu gerendert wird.
1. Über Meta
Bevor Sie Medienabfragen verwenden, müssen Sie zunächst die Einstellung verwenden Lassen Sie uns kurz über das
Dieses Tag wird normalerweise innerhalb des Head-Tags platziert und wird verwendet, um Metainformationen (Metainformationen) über ein HTML-Element bereitzustellen, wie z. B. Beschreibung, Schlüsselwörter für Suchmaschinen und Aktualisierungshäufigkeit.
Die Einstellungen für Medienabfragen sind wie folgt:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Parameterbeschreibung:
1 Das Namensattribut liefert den Namen im Name/Wert-Paar. name="viewport" bedeutet zusätzlich zum Ansichtsfenster die Einstellung des Fensters.
2. Das Inhaltsattribut stellt den Wert im Name/Wert-Paar bereit. Der Wert kann eine beliebige gültige Zeichenfolge sein und der Inhalt basiert immer auf dem Inhalt. Er sollte immer zusammen mit dem http-equiv- oder Namensattribut verwendet werden ihnen eine Definition der damit verbundenen Werte zu liefern. Inhaltswertbeschreibung:
width = device-width: width entspricht der Breite des aktuellen Geräts
initial-scale: anfängliche Skalierung (Standardeinstellung ist 1,0); 🎜 >Minimaler Maßstab: Der minimale Maßstab, auf den der Benutzer zoomen darf (die Standardeinstellung ist 1,0);
Maximaler Maßstab: Der maximale Maßstab, auf den der Benutzer zoomen darf (die Standardeinstellung ist). 1.0);
user -scalable: ob der Benutzer manuell zoomen kann (Standard ist „Nein“, da wir nicht möchten, dass Benutzer die Seite vergrößern und verkleinern).
Weitere Informationen zu finden Sie unter:
http://www.w3school.com.cn/tags/tag_meta.asp
2. Implementierungsmethode für Medienabfragen1. Bestimmen Sie die Größe des Geräts direkt im Link und verweisen Sie dann auf verschiedene externe CSS-Dateien. Zum Beispiel:
<link type="text/css" href="media_1.css" media="screen and (min-width: px)">
Wenn der Bildschirm größer als 400 Pixel ist, wird auf die externe CSS-Stildatei media_1.css verwiesen.
2. Wenn Sie den CSS-Stil festlegen, legen Sie @media direkt danach fest. Zum Beispiel:
.div1{
width: 400px;
height: 400px;
}
/*当屏幕大于1440px的彩色屏幕样式*/
@media screen and (min-width: 1440px){
.div1{
width: 800px;
height:800px;
}
}Dies ist eine mit CSS3 implementierte Medienabfrage. Tatsächlich handelt es sich bei der Medienabfrage im Wesentlichen um eine Stilüberschreibung.
3. CSS3-Medienabfrage
1. Grundlegende Syntax
@media 媒体类型 关键字 and (媒体功能) {
/* CSS 样式 */
}Nur Schlüsselwörter: Geben Sie einen bestimmten Medientyp an, den Sie ausschließen können Browser, die keine Medienabfragen unterstützen.
nicht: Einen bestimmten Medientyp ausschließen.
Die Verwendung von Schlüsselwörtern wird häufig verwendet, um Geräte zu beschreiben, die keine Medienfunktionen, aber Medientypen unterstützen.
3 Medientyp
Medientyp beschreibt die allgemeinen Gerätekategorien. Medientypen sind optional und der Typ all wird implizit verwendet, es sei denn, die Schlüsselwörter not oder only werden verwendet.
Alle Browser unterstützen Medienattribute mit den Werten „screen“, „print“ und „all“. 4. Häufig verwendete Medienfunktionen| 值 | 描述 |
|---|---|
| all | 用于所有多媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器 |
Die folgenden sind nur einige der Medienfunktionen, die möglicherweise etwas häufiger verwendet werden:
Höhe definiert die Höhe des sichtbaren Bereichs von die Seite im Ausgabegerät.
width definiert die Breite des sichtbaren Bereichs der Seite im Ausgabegerät.
max-height definiert die maximale sichtbare Bereichshöhe der Seite im Ausgabegerät.
max-width definiert die maximale sichtbare Bereichsbreite der Seite im Ausgabegerät.
min-height definiert die minimale sichtbare Bereichshöhe der Seite im Ausgabegerät.
min-width definiert die minimale sichtbare Bereichsbreite der Seite im Ausgabegerät.
Gerätehöhe definiert die sichtbare Höhe des Bildschirms des Ausgabegeräts.
Gerätebreite definiert die sichtbare Breite des Bildschirms des Ausgabegeräts.
max-device-height definiert die maximale Höhe, die auf dem Bildschirm des Ausgabegeräts sichtbar ist.
max-device-width definiert die maximale sichtbare Breite des Bildschirms des Ausgabegeräts.
Ausrichtung erkennt, ob sich das Gerät derzeit im Quer- oder Hochformat befindet.
4. Für tatsächliche gängige GrößeneinstellungenIm Folgenden sind nur einige gängige Bildschirmgrößen aufgeführt, aber auch Einstellungen für größer als, kleiner als und gleich sind implementiert. CSS-Tutorial Das obige ist der detaillierte Inhalt vonMedienabfragen für CSS-responsives Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website! /* 屏幕尺寸大于960px时（普通彩色屏幕） */
@media only screen and (min-width:960px){ }
/* 屏幕尺寸小于1440px时 */
@media only screen and (max-width:1440px){ }
/* 屏幕尺寸大于960px而小于1920px */
@media only screen (min-width: 960px) and (max-width: 1920px){ }
/* 屏幕大于2000px时（MAC) */
@media only screen and (min-width:2000px){ }
/* 当设备可视宽度小于480px (iphone)*/
@media only screen and (max-device-width:480px){ }
/* 当设备可视宽度等于768px时 (iPad) */
@media only screen and (device-width:768px){ }
/* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }
/* 屏幕尺寸大于481px而小于1024px (iPad横屏) */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { }Empfohlenes Tutorial: „
