CSS メディア クエリを使用してレスポンシブ レイアウトを作成する_html/css_WEB-ITnose
現在、Web フロントエンドの分野では、BootStrap は最も人気のある UI ライブラリの 1 つであり、その 12 列のフェンス システムは、プログラマが操作しやすい応答性の高いレイアウトのモードを提供します。
Bootstrap の内部原理を調査すると、画面サイズ、解像度、デバイスの違いによって引き起こされるさまざまなシナリオで CSS スタイルの選択を完了するには、実際にはメディア クエリを通じて行われます。今日はメディアクエリのツールまたは方法について概要を説明します。
CSS バージョン 2 以降、メディア タイプを通じて CSS でメディア サポートを取得できます。
1. メディアクエリの使い方:
<link rel="stylesheet" type="text/css" href="site.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />
Css スタイルシートを紹介する上記 2 つの文には、一般的な Css 導入文よりもキーワード「メディア」が 1 つ多くあり、それぞれを指定するために使用することを media 属性で定義しています。メディア タイプのスタイル シート: コンピューターのカラー スクリーン用の
※ここではCssで導入した文の中にmedia属性を入れているので、以下のクエリ文ではscreenやprintを省略することができます。
2. 一般的なメディアクエリ構文:
@media “media type” condition {/*CSS样式表*/}
このうち、「@media」は別の方法で「media=」と書くこともできます
「メディアタイプ」はメディアクエリが適用されるメディアタイプです。すべてのメディアが次の CSS スタイル シートを使用することを意味する「all 」、または最小画面幅が 800px の場合に次の CSS スタイル シートが使用されることを意味する「(min-width:800px)」など、適用されます。画面幅が 800px を超えている場合は、この CSS を適用してください。
つまり、メディアクエリは、メディアタイプと、それに続く特定の条件(最小画面幅など)をチェックする1つ以上の式で構成されます。条件が true か false かを評価し、条件が true に変更された場合は CSS が適用され、そうでない場合は適用されません。
これから、多くのメディアクエリタイプを拡張できます。
3. CSS メディアクエリでは、「and」、「or」、「not」という 3 つの論理演算を使用できます。 もちろん、意味を説明する必要はありません。いくつかの例を見ると一目瞭然です:
/*在将某个媒体查询应用于所有媒体类型时,会省略 all*/@media (min-width:800px) { ... }/*宽度在800~1200px之间时激活*/@media (min-width:800px) and (max-width:1200px) { ... }/*可以使用多个and运算符,这里添加了第三个判断方向为纵向*/@media (min-width:800px) and (max-width:1200px) and (orientation:portrait) { ... }/*宽度为800px或者方向为纵向时激活*/@media (min-width:800px) or (orientation:portrait) { ... }/*宽度不是800px时激活*/@media (not min-width:800px) { ... }
4. 幅と高さが非常に似ているので、この 2 つの条件を一緒に使用できます:
@media (min-width:800px) and (min-height:400px) { ... }
方向クエリ:
@media (orientation:portrait) { ... }
Without max-or min-query、もちろん、この種のクエリのユーザビリティはあまり高くありません:
@media (width:800px) and (height:400px) { ... }
5. 一般的なメディアクエリ
Apple がユーザーのスマートフォンやタブレットを初めて市場に投入したため、ほとんどの次のメディア クエリは、これらのモデルに基づくデバイスです。
横向きモードのスマートフォンをターゲットにする場合は、次を使用します: @media (min-width: 321px) { ... }
縦向きモードのスマートフォンをターゲットにする場合は、次を使用します: @media (max-width: 320px) { .. . }
ターゲットが横向きモードの Apple iPad の場合は、次を使用します: @media (orientation: landscape) { ... }
ターゲットが縦向きモードの iPad である場合は、次を使用します: @media (orientation: 縦向き) { .. }
iPad では方向メディア機能が使用され、Apple iPhone では幅が使用されていることに気づいたかもしれません。主な理由は、iPhone が方向メディア機能をサポートしていないためです。これらの方向のブレークポイントをシミュレートするには、幅を使用する必要があります。
6. ネストされたメディア クエリ:
#header { width: 400px; @media (min-width: 800px) { width: 100%; }}
上記のコードは次の結果にコンパイルされます:
#header { width: 400px;}@media (min-width: 800px) { #header { width: 100%; }}
上記はメディア クエリの概要を作成する例として幅を使用しています。内側。幅と高さは、メディア クエリを使用して制御できる 2 つの属性にすぎません。色、カラー インデックス (整数)、アスペクト比 (比率)、およびその他の属性も使用できます。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

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

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

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

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

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

ホットトピック









HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1)HTMLの学習曲線はスムーズで簡単に開始できます。 2)基本タグをマスターして、Webページの作成を開始します。 3)柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4)豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

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

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

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

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

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

GiteEpages静的Webサイトの展開が失敗しました:404エラーのトラブルシューティングと解像度Giteeを使用する
