Media Query

🎅 Media Queryとは?

メディアクエリはCSS構文の1つであり、反応式設計を使用するのに役立ちます.

🎅 構文

メディアクエリには、次の構文があります.

@media <media type> and (media feature) { /*...*/ }

の先頭はat-ruleという@mediaキーワードで始まる必要があります.カッコのフィーチャーは0より大きい必要があります.

🎅 media feature

@media screen and (max-width: 1023px) { 
              			... 
              }

メディアフィーチャーはカッコで囲まれ、nameとvalueを有する.

この構造はcss属性と類似しているが,厳密には異なる.

🎅 Logic条件

@media screen and (min-width: 400px) or (max-width: 800px) { ... }

論理演算子にはand,or,notがある.

@media not print and (min-width: 100px) { ... }

not演算子は、すべてのメディアクエリを否定します.

したがって、

の例は、ユーザが非印刷またはmin−widthが100 px未満である場合に適用される.

not演算子を使用するには、メディアタイプを定義する必要があります.

したがって,ある条件下でのみ否定をとるnot()関数もある.

🎅 nesting

@media (min-width: 400px) and (max-width: 800px) { /*...*/ } @media (min-width: 400px) { @media (max-width: 800px) { /*...*/ } }

andからなるメディア特徴は、オーバーラップ文に変換することができる.

また、

@mediascreen{}内にメディアクエリーを作成して、画面にのみ適用されるスタイルを定義することもできます.

🎅 media query in Html

<link href="style.css" rel="stylesheet" media="screen and (min-width: 400px)"/> <style media="screen and (min-width: 400px)"> ... </style>

linkラベルまたはstyleラベルのメディアプロパティとして定義できます.

🎅 アプリケーションメディアQuery

モバイル一線vsデスクトップ優先.

メディアクエリを理由とした反応型設計を設計する際には,主にモバイル優先の設計とデスクトップ優先の設計を考慮する.

mobilefirst:移動優先、min-widthメディアの特徴によりdest top画面を考慮.

デスクトップfirst:デスクトップが優先され、最大幅のメディアフィーチャーでモバイルスクリーンを考慮します.

ほとんどの人は日線を移動するのが好きです.理由は狭いところを広げるのは簡単だが、反対するのは難しい.

main {
  display: flex;
  flex-direction: column;
}

@media (min-width: 40rem) {
  main {
    flex-direction: row;
  }
}

🎅 dimensions

widthやheightなどの寸法に関連するプロパティを使用します.

は、通常、pxを値の単位として使用する.Emは、ユーザーの拡大と縮小に役立ちます.

🎅 aspect ratio

@media (aspect-ratio: 16/9) { 
		/* 화면비가 16:9인 경우*/ 
} 
@media (min-aspect-ratio: 1/1) { 
	 /* 최소 화면 비가 1:1 이상인 경우.
		즉, 화면의 높이에 비해 너비가 더 넓은 경우 */ 
	 /* (orientation: landscape) 와 동일 */ 
} 
@media (max-aspect-ratio: 1/1) { 
    /* 최대 화면 비가 1:1 미만인 경우. 즉, 화면의 너비에
        비해 높이가 더 높은 경우 */ 
    /* (orientation: portrait) 와 동일 */ 
}

の高さと幅の比率aspect-ratioまたは方位も使用できます.

🎅 実際のコード使用練習

.address {
    position: absolute;
    display:flex;
    justify-content: center;
    bottom: 5%;
    left: 100px;
    width: 500px;
    height:700px;
    animation: slide_left 1.2s ease-out;    
    padding: 20px 15px;
    flex-wrap: wrap;
    background-color: white;    
}
@media (max-width: 1720px) { 
   .address {
        position: absolute;
        display:flex;
        justify-content: center;
        bottom:5%;
        left:2%;
        width:500px;
        height:700px;
        animation: slide_left_2 1.2s ease-out;
        background-color: #fefefe;
        padding: 20px 15px;
        flex-wrap: wrap;
    }
}

.addressのstyleが1720 px前の画面と一致しないことを考慮すると、左値とアニメーション値が変更されます.

🎅 の最後の部分

ここまで、メディアの照会を調べて、良い資料の上で見て、書いてみましたが、私が書いていない部分と書いている理由は、このようなことがよくあると思います.

でも勉強を続けて理解すれば良いので、反応型ページを作るためには、使い勝手が一番です.