新しいCSSメディアクエリ範囲構文

<p>CSSメディアクエリスコープ構文の新機能：より簡潔でレスポンシブなWebデザイン</p> <p> </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> CSSメディアクエリは、特定の条件に基づいて要素スタイルを選択および設定するための重要なツールです。これらの条件はさまざまですが、通常、2つのカテゴリに分かれています。（1）使用されるメディアのタイプ、および（2）ブラウザ、デバイス、さらにはユーザー環境の特定の機能です。 <p> たとえば、</p>印刷されたドキュメントに特定のCSSスタイルを適用するには：<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">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>イーサン・マルコットはレスポンシブウェブデザインの概念を提案したため、ビューポート幅に基づいてスタイルを適用する機能により、CSSメディアクエリはコンテンツのコアコンポーネントになりました。ブラウザのビューポート幅が特定のサイズに達すると、ブラウザのサイズに応答できるデザイン要素に一連のスタイルルールが適用されます。 <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>/* 当视口宽度至少为30em时... */ @media screen and (min-width: 30em) { .element { /* 样式代码 */ } }</code></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>その中の演算子に注意を払いますか？声明を組み合わせることができます。この例では、メディアタイプが画面である条件を組み合わせて、<p>機能が30EM（または上）に設定されています。ビューポートのサイズの範囲を見つけるために同じことをすることができます：<code>and</code> <code>min-width</code> </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">ログイン後にコピー</div></div> ただし、メディアクエリレベル4の仕様では、<p>、</p>、<p>）などの一般的な数学的比較演算子を使用するための新しい構文を導入して、コードの量を減らしながらコードを作成する際の構文に準拠する範囲の範囲を見つけます。 <code><</code> <code>></code>それがどのように機能するかをより深く理解しましょう。 <code>=</code> </p>新しい比較演算子<p> </p>最後の例は、<h3>オペレーターを使用して条件を組み合わせることにより、範囲をどのように「偽造」するかを示しています。メディアクエリレベル4の仕様の大きな変更は、それらを組み合わせる代わりに値を比較する新しい演算子があることです。 </h3> <p><code>and</code>：1つの値が</p>よりも少ないかどうかを評価し、別の値<ul> <li> <code><</code>：ある値が<strong>よりも大きいかどうかを評価します</strong> </li><li>：1つの値が<code>></code>に等しいかどうかを評価し、別の値<strong> </strong> </li>：1つの値が別の値よりも小さいか等か等しいかを評価します<li> <code>=</code><strong>：1つの値が</strong>以上の値が大きいかどうかを評価します</li> <li> <code><=</code>ブラウザの幅が600px以上の場合、スタイルを適用するメディアクエリの作成方法は次のとおりです。 <strong> </strong>以下は、比較演算子を使用して同じコンテンツを書き込む方法です。 </li> <li>配置ビューポート幅の範囲<code>>=</code> <strong> CSSメディアクエリを書くとき、通常、</strong> - 「ブレーク」の条件を設計するものと呼ばれるものを作成し、それを修正するために一連のスタイルを適用します。デザインには多くのブレークポイントがあります！通常、ブレークポイントが始まり、ブレークポイントが終了する2つの幅の間のビューポートに基づいています。 </li> </ul>以下は、<p>オペレーターを使用して2つのブレークポイント値を組み合わせる方法です。</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">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>ブール値を放棄して<code>and</code>オペレーターを採用し、新しいスコープ比較構文を採用すると、メディアクエリを書くのがどれほど簡単かを理解し始めます。 </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">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>はるかに簡単ですよね？そして、それはこのメディアクエリの役割を明確に示しています。 <p> </p>ブラウザサポート<h3> </h3>執筆時点では、この改善されたメディアクエリ構文はまだ初期段階にあり、現在のサポートは<p>と<code>min-width</code>の組み合わせほど広くありません。しかし、私たちは近づいています！現在、Safariは唯一の主要な例外ですが、焦点を当てることができる未解決の問題があります。 <code>max-width</code> </p>このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、このバージョンでブラウザがこの機能をサポートしていることを示しています。 <p> </p>desktop<h4> </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> モバイル/タブレットPC<h4> </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> </h3>CSSメディアクエリでビューポート幅範囲を配置するための新しい構文を広範囲に導入します。メディアクエリレベル4の仕様がこの構文を導入し、FirefoxおよびChromiumブラウザーによって採用されたため、新しい比較演算子を使用して、高さやアスペクト比などの幅以外の他の範囲メディア機能と組み合わせることができるようになりました。 <p> </p>これは、レベル4の仕様によって導入された新しい機能の1つであり、ユーザーの好みに基づいて作成できる一連のクエリにすぎません。それはそこで終わりませんでした！ 「CSSメディアクエリの完全なガイド」をチェックして、メディアクエリレベル5に含まれる可能性のあるものを最初に確認してください。 <p></p>

以上が新しいCSSメディアクエリ範囲構文の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。