Medienabfrage ist eine neue Funktion von CSS3, die für das responsive Design der Seite mithilfe der „@media“-Abfrage verwendet werden kann. Sie kann zum Definieren fehlgeschlagener Stile für verschiedene Medientypen verwendet werden und kann auch verschiedene Stile für verschiedene festlegen Bildschirmgrößen. Stil, die Syntax ist „@media [Medienmedium] und|oder (Bedingung) und|oder (Bedingung){Stil}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
1. Medienabfrage ist eine neue Funktion von CSS3, die für das responsive Design der Seite verwendet werden kann.
2. Es können mehrere Sätze unterschiedlicher Stile für unterschiedliche Bildschirme und unterschiedliche Auflösungen entworfen werden.
Medienabfragesyntax
@media [媒体介质] and|or (条件) and|or (条件){
//样式
.class{
}
}
//页面可见高度小于等于500px时，设置字体大小为10px
@media screen and(max-height:500px){
.class{
font-size:10px
}
}Mit @media-Abfragen können Sie verschiedene Stile für verschiedene Medientypen definieren.
@media kann verschiedene Stile für unterschiedliche Bildschirmgrößen festlegen, insbesondere wenn Sie eine responsive Seite einrichten müssen, ist @media sehr nützlich.
Wenn Sie die Browsergröße zurücksetzen, wird die Seite auch entsprechend der Breite und Höhe des Browsers neu gerendert.
CSS-Syntax
@media not|only mediatype and (mediafeature and|or|not mediafeature) {
CSS-Code;
}nicht, und, und kann nur zum gemeinsamen Erstellen komplexer Medienabfragen verwendet werden, und Sie können auch mehrere Medienabfragen in einer einzigen Regel kombinieren, indem Sie sie durch Kommas trennen.
not, nur und und Schlüsselwortbedeutung:
not: Der Not-Operator wird verwendet, um Medienabfragen zu negieren. Wenn diese Bedingung nicht erfüllt ist, gibt er true zurück, andernfalls gibt er false zurück. Wenn es in einer durch Kommas getrennten Liste von Abfragen vorhanden ist, wird nur die spezifische Abfrage negiert, auf die es angewendet wird. Wenn Sie den Not-Operator verwenden, müssen Sie auch den Medientyp angeben.
nur: Der einzige Operator wird verwendet, um einen Stil nur dann anzuwenden, wenn die gesamte Abfrage übereinstimmt, und ist nützlich, um zu verhindern, dass ältere Browser den ausgewählten Stil anwenden. Wenn nur nicht verwendet wird, interpretieren ältere Browser einfach screen und (max-width: 500px) als screen, ignorieren den Rest der Abfrage und wenden seine Stile auf alle Bildschirme an. Wenn Sie den einzigen Operator verwenden, müssen Sie auch den Medientyp angeben.
, (Komma) Das Komma wird verwendet, um mehrere Medienabfragen in einer einzigen Regel zusammenzufassen. Jede Abfrage in der durch Kommas getrennten Liste wird getrennt von anderen Abfragen verarbeitet. Wenn daher eine Abfrage in der Liste wahr ist, gibt die gesamte Medienanweisung „wahr“ zurück. Mit anderen Worten: Die Liste verhält sich wie der logische ODER-Operator.
und: und-Operator wird verwendet, um mehrere Medienabfrageregeln in einer einzigen Medienabfrage zu kombinieren. Wenn jede Abfrageregel wahr ist, wird sie auch verwendet, um Medienfunktionen mit kombinierten Medientypen zu kombinieren.
Medientypen beschreiben allgemeine Gerätekategorien. Sofern nicht die logischen Operatoren „not“ oder „only“ verwendet werden, ist der Medientyp optional und der Typ „all“ wird (implizit) angewendet.
Sie können auch verschiedene Stildateien für verschiedene Medien verwenden:
<!-- 宽度大于 900px 的屏幕使用该样式 --> <link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css"> <!-- 宽度小于或等于 600px 的屏幕使用该样式 --> <link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
(Lernvideo-Sharing: CSS-Video-Tutorial, HTML-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonIst Medienabfrage ein neues Attribut in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
