ホームページ ウェブフロントエンド htmlチュートリアル CSS メディア クエリを使用してレスポンシブ レイアウトを作成する_html/css_WEB-ITnose

CSS メディア クエリを使用してレスポンシブ レイアウトを作成する_html/css_WEB-ITnose

Jun 24, 2016 am 11:22 AM

現在、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 属性で定義しています。メディア タイプのスタイル シート: コンピューターのカラー スクリーン用の

  • screen。
  • print は、印刷プレビュー モードで表示されるコンテンツ、またはプリンターで印刷されるコンテンツに適しています。
  • ※ここでは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 つの属性にすぎません。色、カラー インデックス (整数)、アスペクト比 (比率)、およびその他の属性も使用できます。

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

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

    AI Clothes Remover

    AI Clothes Remover

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

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

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

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

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

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

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

    HTMLは初心者のために簡単に学ぶことができますか? HTMLは初心者のために簡単に学ぶことができますか? Apr 07, 2025 am 12:11 AM

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

    &lt; Progress&gt;の目的は何ですか 要素? &lt; Progress&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:34 PM

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

    HTML、CSS、およびJavaScriptの役割:コアの責任 HTML、CSS、およびJavaScriptの役割:コアの責任 Apr 08, 2025 pm 07:05 PM

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

    &lt; datalist&gt;の目的は何ですか 要素? &lt; datalist&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

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

    &lt; meter&gt;の目的は何ですか 要素? &lt; meter&gt;の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

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

    HTMLでの開始タグの例は何ですか? HTMLでの開始タグの例は何ですか? Apr 06, 2025 am 12:04 AM

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

    HTML、CSS、およびJavaScriptの理解:初心者向けガイド HTML、CSS、およびJavaScriptの理解:初心者向けガイド Apr 12, 2025 am 12:02 AM

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

    Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Giteeページ静的なWebサイトの展開に失敗しました:単一のファイル404エラーをトラブルシューティングと解決する方法 Apr 04, 2025 pm 11:54 PM

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

    See all articles