La nouvelle syntaxe de gamme de requêtes multimédias CSS

<p> Nouvelles fonctionnalités de la syntaxe de portée de la requête CSS Media: une conception Web plus concise et réactive </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> La requête multimédia CSS est un outil clé pour sélectionner et définir les styles d'élément en fonction de conditions spécifiques. Ces conditions varient, mais sont généralement divisées en deux catégories: (1) le type de support utilisé et (2) les fonctions spécifiques du navigateur, de l'appareil et même de l'environnement utilisateur. </p> <p> par exemple, pour appliquer un style CSS spécifique à un document imprimé: </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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Étant donné qu'Ethan Marcotte a proposé le concept de conception Web réactive, la possibilité d'appliquer des styles basés sur la largeur de la fenêtre a fait de CSS Media Queries un composant central de son contenu. Si la largeur de la fenêtre du navigateur atteint une certaine taille, un ensemble de règles de style est appliquée aux éléments de conception qui peuvent répondre à la taille du navigateur. </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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Faites attention à l'opérateur <code>and</code>? Il nous permet de combiner des déclarations. Dans cet exemple, nous combinons des conditions où le type de support est l'écran et la fonction <code>min-width</code> est définie sur 30EM (ou supérieur). Nous pouvons faire la même chose pour localiser la gamme de taille de la fenêtre: </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">Copier après la connexion</div></div> <p> Maintenant, ces styles s'appliquent à une plage de largeur de fenêtre claire, plutôt qu'à une seule largeur! </p> <p> Cependant, la spécification du niveau de requête multimédia 4 introduit une nouvelle syntaxe pour utiliser des opérateurs de comparaison mathématique courants tels que <code><</code>, <code>></code> et <code>=</code>) pour localiser la plage de largeurs de vision, qui sont plus conformes à la syntaxe lors de l'écriture de code tout en réduisant la quantité de code. </p> <p> Allons une compréhension plus profonde de son fonctionnement. </p> <h3> Nouvel opérateur de comparaison </h3> <p> Le dernier exemple montre comment nous "forgeons" la plage en combinant des conditions à l'aide de l'opérateur <code>and</code>. Un changement majeur dans la spécification du niveau de requête multimédia est que nous avons de nouveaux opérateurs pour comparer les valeurs au lieu de les combiner: </p> <ul> <li> <code><</code>: Évaluez si une valeur est inférieure à <strong> et une autre valeur </strong> </li> <li>: évaluer si une valeur est supérieure à <code>></code> une autre valeur <strong> </strong> </li>: Évaluez si une valeur est égale à <li> et une autre valeur <code>=</code> <strong> </strong>: Évaluez si une valeur est inférieure ou égale à </li> une autre valeur <li> <code><=</code> <strong>: évaluer si une valeur est supérieure ou égale à </strong> une autre valeur </li> <li> <code>>=</code> Voici comment nous écrivons une requête multimédia qui applique le style si la largeur du navigateur est de 600px ou plus: <strong> </strong> </li> Ce qui suit est de savoir comment écrire le même contenu en utilisant l'opérateur de comparaison: </ul> <p> </p> La gamme de la largeur de la fenêtre de positionnement <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">Copier après la connexion</div></div> <p> Lorsque nous écrivons les requêtes multimédias CSS, nous créons généralement ce qu'on appelle </p> - disons les conditions de "pauses" et appliquons un ensemble de styles pour le réparer. Un design peut avoir de nombreux points d'arrêt! Ils sont généralement basés sur la fenêtre entre deux largeurs: où le point d'arrêt démarre et le point d'arrêt se termine. <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">Copier après la connexion</div></div> <h3> Voici comment nous utilisons l'opérateur </h3> pour combiner deux valeurs de point d'arrêt: <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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Lorsque nous abandonnons l'opérateur booléen <code>and</code> et adoptons la nouvelle syntaxe de comparaison de la portée, vous commencerez à comprendre à quel point il est facile d'écrire des requêtes multimédias: </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">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> C'est beaucoup plus simple, non? Et il illustre clairement le rôle de cette requête médiatique. </p> <h3> Prise en charge du navigateur </h3> <p> Au moment de la rédaction, cette syntaxe de requête multimédia améliorée en est encore à ses débuts et le support actuel n'est pas aussi large que la combinaison de <code>min-width</code> et <code>max-width</code>. Cependant, nous approchons! Actuellement, Safari est la seule exception majeure, mais il y a un problème non résolu sur lequel vous pouvez vous concentrer. </p> <p> Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette versions et ultérieures. </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 / tablette 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> Résumé </h3> <p> Nous introduisons largement la nouvelle syntaxe pour le positionnement des plages de largeur de la fenêtre dans les requêtes multimédias CSS. Maintenant que la spécification du niveau de requête multimédia a introduit cette syntaxe et qu'elle a été adoptée par les navigateurs Firefox et Chromium, nous nous rapprochons de la possibilité d'utiliser les nouveaux opérateurs de comparaison et de les combiner avec d'autres fonctionnalités de support de plage autres que des largeurs, telles que la hauteur et les ratios d'aspect. </p> <p> Ce n'est qu'une des fonctionnalités les plus récentes introduites par la spécification de niveau 4, et une série de requêtes que nous pouvons faire en fonction des préférences des utilisateurs. Cela ne s'est pas terminé là-bas! Consultez le "Guide complet de CSS Media Query" pour obtenir le premier aperçu de ce qui peut être inclus dans le niveau de requête multimédia 5. </p>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!