マルチメディアクエリ@media

定義＃テイギ＃

@mediaクエリーを使用すると、異なるメディアタイプに対して異なるスタイルを定義できます.ブラウザのサイズをリセットすると、ブラウザの幅と高さに基づいてページが再レンダリングされます.

@media not|only mediatype and (expressions) {
	/* CSS       */
}

/*    */

/* only       */
@media only screen and (max-width: 640px) {	
	body{
		margin: 0;
	}
}

共通メディアタイプ
値all
すべてのマルチメディアタイプデバイスに使用print
プリンタ用screen
パソコンのスクリーン、タブレット、スマートフォンなどに使われていますspeech
スクリーンリーダー用
一般的なプロパティ
値width
出力デバイスのページ表示領域の幅を定義します.height
出力デバイスのページ表示領域の高さの定義max-width
出力デバイスのページの最大表示領域幅を定義します.max-height
出力デバイスのページの最大表示領域の高さを定義します.max-device-width
出力デバイスの画面最大表示幅の定義max-device-height
出力デバイスの画面表示の最大高さを定義します.orientation
検出装置は現在、横方向(値landscape)または縦方向(値portrait)の状態にあるかaspect-ratio
ブラウザの可視幅と高さの割合を検出します.(例:aspect-ratio:16/9)device-aspect-ratio
装置の幅と高さの割合を検出するcolor
色のビット数を検出します.(例えば:min-color: 32はデバイスが32ビットの色を持っているかどうかを検出する)

使用

方法1:linkで直接設備の寸法を判断し、それから異なるCSSファイルを引用する.

方法2:もう1つの方法は、styleラベルまたはCSSファイルに直接書くことです.

/*       600px ，     CSS  */
@media screen and (max-width: 600px) { 
	body {    
		margin: 0;
	}
}