CSS3の新機能まとめ(メディアクエリ)_html/css_WEB-ITnose
CSS3 メディア クエリは CSS2 メディア タイプの拡張および改良です。
CSS2 メディア タイプは一部のデバイス キーワードのみを定義しますが、CSS3 メディア クエリは幅、高さ、色などの値の範囲をさらに拡張します。メディア クエリとメディア タイプの違いは、メディア クエリは値または値の範囲であるのに対し、メディア タイプはデバイスの単なる一致です (つまり、メディア タイプは単語であり、メディア クエリの後には値が続く必要があります)。 2 つを混合できます);
media は、リンク タグ属性 [media]
<link rel="stylesheet" type="text/css" href="../css/print.css" media="print and (max-width : 600px)" />
および CSS ファイルで使用できます。
使用可能な演算子と一般的に使用されるメディア タイプを紹介します。 And メディア クエリ:
operator:
and:
and 演算子は、シンボルの両側のルールが条件を満たすかどうかを照合するために使用されます
@media screen and (max-width : 600px) {/*匹配宽度小于600px的电脑屏幕*/}
not:
not 演算子は、 negate, all are not満足 このルールはすべて一致します
@media not print {/*匹配除了打印机以外的所有设备*/}
notを使用する場合、括弧を追加しないと、いくつかの奇妙な現象が発生する可能性があることに注意してください。 例:
@media not all and (max-width : 500px) {}/*等价于*/@media not (all and (max-width : 500px)) {}/*而不是*/@media (not all) and (max-width : 500px) {}
したがって、使用したい場合は、そうではありません。比較のために明示的に括弧を追加する必要があります。明確にしてください
, (カンマ):
は、両側のいずれかが満たされる場合に一致するために使用される or と同等です
@media screen , (min-width : 800px) {/*匹配电脑屏幕或者宽度大于800px的设备*/}
メディア タイプ (のみ)よく使用されるものをいくつか挙げ、残りについてはリンクを示します):
All:
all はすべてのデバイスに一致するデフォルト値です。
印刷:プリンターに一致します (印刷プレビュー時にも一致します) [私の履歴書は印刷用に特別に作られています~]
他のメディアタイプに興味がある場合は、通常、これらの 3 つのタイプがよく使用されます。 、W3School の手順または W3 のドキュメントを読むことができます
Media Query (一般的に使用されるものもあります): //注意が必要です。はい、Media Query は括弧を追加する必要があります
max- width(max-height):
@media all {/*可以过滤不支持media的浏览器*/}
min-width(min-height):
@media (max-width : 600px) {/*匹配界面宽度小于600px的设备*/}
max-device-width (max-device-height):
@media (min-width : 400px) {/*匹配界面宽度大于400px的设备*/}
min-device-width( min-device-height):
うーん開発中に予想される効果に近づきます
すべてのメディア クエリ属性値へのリンクは W3 ドキュメントに記載されています。MDN を参照することもできます。MDN メディア クエリ ドキュメントを中国語化したボランティアがいます
メディアはネストできます:
@media (max-device-width : 800px) {/*匹配设备(不是界面)宽度小于800px的设备*/}
これにより、2 回印刷されない書き込みの冗長性が節約されます。ブラウザによっては、サーバーがメディア タイプのみをサポートし、メディア クエリをサポートしない場合があるため、一定の利点があります。なぜ私が知っているのか、私は困っています)
メディア クエリ (上記のもののみ) の値の単位は、px em rem (%/vh/ vw/vmin/vmax は試していません。無駄な気がします...);
メディアクエリはレスポンシブページの核心であり、実際には、レスポンシブページは異なる解像度で異なる効果を表示します;
レスポンシブページのCSSを書くとき、それは大規模なものと小さなものに分けられます。大から小 (サイズ);
小さいサイズから始めて max-series を使用してメディア クエリを作成することを強くお勧めします。また、大きいサイズの場合はその逆を行うことを強くお勧めします。
この記事のどこに誤りがあるか、欠点があれば指摘してください;

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか?この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース(写真、CSS、JSなど)やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex
