Medienabfragen für CSS-responsives Layout

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 e8e496c15ba93d81f6ea4fe5f55a2244 verwenden Lassen Sie uns kurz über das 16a8c94110984f918953ac7222a65798-Tag sprechen.

e8e496c15ba93d81f6ea4fe5f55a2244 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 e8e496c15ba93d81f6ea4fe5f55a2244 finden Sie unter:

http://www.w3school.com.cn/tags/tag_meta.asp

2. Implementierungsmethode für Medienabfragen

1. 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	用于所有多媒体类型设备
print	用于打印机
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ößeneinstellungen

Im Folgenden sind nur einige gängige Bildschirmgrößen aufgeführt, aber auch Einstellungen für größer als, kleiner als und gleich sind implementiert.

    /* 屏幕尺寸大于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) { }

Hinweis: Aufgrund des Stilabdeckungsproblems von CSS müssen Sie bei der tatsächlichen Einstellung, wenn dasselbe Element auf mehrere unterschiedliche Größen eingestellt werden muss, auf die Reihenfolge achten, z :min- Wenn es um die Breite geht, platzieren Sie die kleinen oben und die großen unten. Wenn Sie die maximale Breite verwenden, sind die großen oben und die kleinen unten.

Empfohlenes Tutorial: „

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!