CSS Making Layouts (Media Query)

10412 ワード
CSS roadmap layout テキストリンク

🌟Responsive Web Design🌟


<CONTENT IS LIKE WATER>


は最近、デスクトップだけでウェブサイトを閲覧するのではなく、モバイル、タブレットなど多くのメディアオブジェクトを使用しています.そのため、コンテンツを含むコンテナに基づいて、Webサイトのレイアウトを柔軟に作成する必要があります.
上図は反応型設計を最も体現できる図だと思います.
反応式設計レイアウトを作成するために使用できるプロパティmediaqueryについて説明します.

🎈 Media Query?


MediaqueryはCSSの機能で、画面の種類や大きさに応じてデザインを変えることができます.メディアクエリーは反応型設計の核心技術である.

🚥 メディアクエリの使用方法


1.<link>要素を使用して、プロパティが条件に合致したときにcssファイルをロードします。

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />

2.スタイルシートで@Mediaを使用します。

@media screen and (max-width: 768px) { 

		body 
			{ background-color: lightgreen; 
            		} 
		}

💻 メディアクエリ構文のコンポーネント



1)media-type:ブラウザにどのメディアのために準備されているかを示すメディアタイプを選択します。


メディアタイプは4種類あります.
  • all:すべてのメディアデバイスを表します.
  • print:印刷結果と出力プレビュー画面に表示されるドキュメントを表します.
  • screen:
  • 音声:音声合成装置向け
    • <メディアオブジェクトごとの一般的な画面幅(px)>
  • mobile (320px~480px)
  • tablet (768px~1024px)
  • desktop (1024px~)

    • 2)media-feature-rule:cssルールが渡さなければならないルールまたは条件文式を入力します。


    MDNメディアクエリーの使用において、メディア特性セグメントからいくつかの特定の特性が見られる.

    3）CSS rules gohere：条件文を通じて、メディアタイプが正しい場合に適用されるCSSルールセット。


    🌈 メディアクエリの基本アプリケーション

    <!doctype html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @media (max-width:600px){
            body{
                background-color: green;
            }
        }
        @media (max-width:500px){
            body{
                background-color: red;
            }
        }
        @media (min-width:601px){
            body{
                background-color: blue;
            }
        }
    </style>
</head>
<body>
   <ul>
       <li>~500px : red</li>
       <li>501~600px : green</li>
       <li>601px~ : blue</li>
   </ul>
</body>
</html>
    Web上でF 12をクリックすると、開発者ツールが表示されます.開発者ツールがアクティブな場合、右上隅に画面サイズ(px単位)が表示されます.

    記述されたコードにおいて、条件@media (max-width:600px)は、画面の最大幅が600 pxである場合、条件の内容が実行されることを意味する.すなわち、600 px未満の幅では、条件の内容が実行される.max,minの意味が混同されることがあることに注意してください.
    カスケード化のため、メディアqueryを同じ領域に適用する順序は本当に重要です.
    次の例を参照してください.
            /* 500px 보다 좁을 때 적용*/
        @media (max-width:500px) {
            body{
                background-color: green;
            }
        }
        /* 600px 보다 좁을 때 적용*/
        @media (max-width:600px){
            body{
                background-color: red;
            }
        }
    上記のコードに示すように、styleラベルにメディアクエリーを指定します.bodyラベルは500 px以下600 px以下でgreen、red効果を同時に受ける.この場合、通常、より狭い条件500 px以下であれば、画面の色は緑色であるべきである.ですが、上図から475 pxの画面色にも赤の効果が適用されていることがわかります.2つの条件の効果を適用するには、条件の順序を変更する必要があります.
            /* 600px 보다 좁을 때 적용*/
        @media (max-width:600px){
            body{
                background-color: red;
            }
        }
         /* 500px 보다 좁을 때 적용*/
        @media (max-width:500px) {
            body{
                background-color: green;
            }
        }
    🌌 同じ領域で2つ以上のメディアクエリー条件を使用する場合は、順序に注意してください.

    論理値の使用


    論理演算子を使用して、より複雑なメディアクエリー条件を指定できます.

    1) and


    and演算子を使用すると、最大幅600 px、最大高さ500 pxの場合、条件内容がアクティブになります.
     @media (max-width:600px) and (max-height:500px) {
            body{
                background-color: green;
            }
        }

    2)カンマ(,)


    論理演算子orと同じです.最大幅600 pxまたは最大高さ500 pxの場合、条件コンテンツがアクティブになります.条件参照が1つだけ返されると、条件の内容全体がアクティブになります.
     @media (max-width:600px) or (max-height:500px) {
            body{
                background-color: green;
            }
        }

    3) not


    not演算子を使用して条件を否定します.min-width:600 pxの反対min-width:600.
     @media not all and (max-width:600px) {
            body{
                background-color: green;
            }
        }

    4) only


    リファレンス


    MDNメディアクエリーの使用
    応答型Webのメディアクエリの使用方法(CSS Media questions)
    生活コードメディアquery
    Linux topコマンドの概要(毎日1命令の6)
    Win 10サブシステムubuntu交換ソース