Die neue CSS Media Query Range Syntax

<p> Neue Funktionen von CSS Media Query Scope Syntax: Eine prägnantere und reaktionsschnellere Webdesign </p> <p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174156973483540.jpg" class="lazy" alt="The New CSS Media Query Range Syntax "> </p> <p> CSS Media Query ist ein Schlüsselwerkzeug zum Auswählen und Festlegen von Elementstilen basierend auf bestimmten Bedingungen. Diese Bedingungen variieren, sind jedoch normalerweise in zwei Kategorien unterteilt: (1) die Art der verwendeten Medien und (2) spezifische Funktionen des Browsers, des Geräts und der sogar Benutzerumgebung. </p> <p> zum Beispiel, um einen bestimmten CSS -Stil auf ein gedrucktes Dokument anzuwenden: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Da Ethan Marcotte das Konzept des reaktionsschnellen Webdesigns vorschlug, hat die Möglichkeit, Stile basierend auf der Ansichtsfensterbreite anzuwenden, CSS -Medienabfragen zu einem Kernkomponente seiner Inhalte gemacht. Wenn die Ansichtsfensterbreite des Browsers eine bestimmte Größe erreicht, wird eine Reihe von Stilregeln für Designelemente angewendet, die auf die Größe des Browsers reagieren können. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> achten Sie auf den <code>and</code> -Operator darin? Es ermöglicht uns, Aussagen zu kombinieren. In diesem Beispiel kombinieren wir Bedingungen, unter denen der Medientyp Bildschirm ist und die <code>min-width</code> -Funktion auf 30EM (oder höher) eingestellt ist. Wir können dasselbe tun, um den Bereich der Ansichtsfenstergröße zu finden: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>/* 当视口宽度在30em到80em之间时 */ @media screen and (min-width: 30em) and (max-width: 80em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Jetzt gelten diese Stile für eine klare Ansichtsfensterbreite und nicht für eine einzige Breite! </p> <p> Die Spezifikation der Medienabfrage Level 4 führt jedoch eine neue Syntax für die Verwendung gemeinsamer mathematischer Vergleichsbetreiber wie <code><</code>, <code>></code> und <code>=</code>) ein, um den Bereich der Ansichtsfensterbreiten zu lokalisieren, die beim Schreiben von Code den Code reduzieren. </p> <p> Lassen Sie uns ein tieferes Verständnis dafür bekommen, wie es funktioniert. </p> <h3> Neuer Vergleichsbetreiber </h3> <p> Das letzte Beispiel zeigt, wie wir den Bereich "Schmieden" durch die Kombination von Bedingungen mit dem <code>and</code> -Operator "" "schmieden". Eine wesentliche Änderung in der Spezifikation der Medienabfrage Level 4 besteht darin, dass wir neue Betreiber haben, um Werte zu vergleichen, anstatt sie zu kombinieren: </p> <ul> <li> <code><</code>: Bewerten Sie, ob ein Wert kleiner als <strong> und ein anderer Wert </strong> ist </li> <li>: Bewerten Sie, ob ein Wert größer als <code>></code> ein anderer Wert <strong> ist </strong> </li>: Bewerten Sie, ob ein Wert gleich <li> und ein anderer Wert <code>=</code> ist <strong> </strong>: Bewerten Sie, ob ein Wert kleiner oder gleich </li> Ein anderer Wert <li> ist <code><=</code> <strong>: Bewerten Sie, ob ein Wert größer oder gleich </strong> Ein anderer Wert </li> ist <li> <code>>=</code> Hier ist, wie wir eine Medienabfrage schreiben, die den Stil anwendet, wenn die Browserbreite 600px oder größer ist: <strong> </strong> </li> Folgendes schreibt wie Sie den gleichen Inhalt mit dem Vergleichsbetreiber schreiben: </ul> <p> </p> Der Bereich der Positionierung der Ansichtsfenster <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media (min-width: 600px) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Wenn wir CSS -Medienabfragen schreiben, erstellen wir normalerweise das, was als </p> bezeichnet wird. Ein Design kann viele Haltepunkte haben! Sie basieren normalerweise auf dem Ansichtsfenster zwischen zwei Breiten: wobei der Haltepunkt beginnt und der Haltepunkt endet. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media (width >= 600px) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Nach dem Login kopieren</div></div> <h3> Folgendes ist, wie wir den </h3> -Operator verwenden, um zwei Breakpoint -Werte zu kombinieren: <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>@media print { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Wenn wir den Booleschen <code>and</code> -Preiber aufgeben und die neue Syntax für den Umfang vergleichenden Vergleich übernehmen, werden Sie verstehen, wie einfach es ist, Medienabfragen zu schreiben: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><code>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Es ist viel einfacher, oder? Und es zeigt deutlich die Rolle dieser Medienfrage. </p> <h3> Browserunterstützung </h3> <p> Zum Zeitpunkt des Schreibens befindet sich diese verbesserte Medienabfrage -Syntax noch in den frühen Stadien und die aktuelle Unterstützung ist nicht so breit wie die Kombination von <code>min-width</code> und <code>max-width</code>. Wir nähern uns jedoch! Derzeit ist Safari die einzige große Ausnahme, aber es gibt ein ungelöstes Problem, auf das Sie sich konzentrieren können. </p> <p> Dieser Browser unterstützt Daten aus Caniuse, die weitere Details enthält. Die Zahl zeigt an, dass der Browser diese Funktion in dieser und späteren Versionen unterstützt. </p> <h4> Desktop </h4> <p> </p> <table> <thead><tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr></thead> <tbody><tr> <td title="Chrome - "></td> <td title="Firefox - "></td> <td title="IE - "></td> <td title="Edge - "></td> <td title="Safari - "></td> </tr></tbody> </table> <h4> Mobile/Tablet PC </h4> <p> </p> <table> <thead><tr> <th></th> <th></th> <th></th> <th></th> </tr></thead> <tbody><tr> <td title="Android Chrome - "></td> <td title="Android Firefox - "></td> <td title="Android - "></td> <td title="iOS Safari - "></td> </tr></tbody> </table> <h3> Zusammenfassung </h3> <p> Wir stellen die neue Syntax für die Positionierung von Ansichtsfensterbreiten in CSS -Medienabfragen aus. Nachdem die Spezifikation der Medienabfrage Level 4 diese Syntax eingeführt hat und von Firefox- und Chrom -Browsern übernommen wurde, nähern wir uns näher, um die neuen Vergleichsbetreiber zu verwenden und sie mit anderen Reichweite Medienfunktionen als Breiten wie Höhen- und Seitenverhältnissen zu kombinieren. </p> <p> Dies ist nur eine der neueren Funktionen, die durch die Spezifikation der Stufe 4 eingeführt werden, und eine Reihe von Abfragen, die wir basierend auf den Benutzereinstellungen machen können. Es endete nicht dort! Schauen Sie sich die "Complete Guide to CSS Media Query" an, um den ersten Blick auf die möglicherweise in der Medienabfrage enthaltenen Stufe 5 zu erhalten. </p>

Das obige ist der detaillierte Inhalt vonDie neue CSS Media Query Range Syntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!