コース名称:大邱AI学校一般コース
講座:ネットプログラミング金仁権6メディア照会210514
テーマ:css

cssメディアのクエリー

適応/反応式ホームページ

ブラウザの大きさによって、ホームページ上の複数のオブジェクトも変化し、これらのオブジェクトの変化方式はホームページを適応型と反応型に分けます.デバイスが多様化するにつれて、画面のサイズも多様化し、画面に出力されるページも画面のサイズに応じて構成されます.
適応ホームページAdaptiv page
変更された基準は固定された値を使用します.設定された区間単位で移動し、少し不自然な変化を呈する.
≪レスポンス・ホーム｜Response Home｜emdw≫:≪レスポンス・ページ｜Response Page｜emdw≫
変更された基準は可変値を使用します.ホームページの変更は、ブラウザのサイズに応じてリアルタイムで移動し、自然に変化します.

Media query

ブラウザの再サイズ、すなわちブラウザのサイズに応じて変化するホームページのプロパティにメディアクエリーを使用します.

<h1 class="pc">PC Hello World</h1>
<h1 class="mobile">Mobile Hello World</h1>

.pc {
	color: red;
	font-size: 50px;
	background-color: pink;
}

@media (min-width: 300px) and (max-width: 700px) {
	.pc {
		color: blue;
		font-size: 20px;
		background-color: yellow;
	}
}

ブラウザの幅値300 pxから699 pxの間で変化するmediaqueryプロパティ.ブラウザの幅値がmediaプロパティから外れている場合は、mediaプロパティ以外の値が適用されます.(入力が大きいか小さいか)

.mobile {
	display: none;
}


@media (min-width:  320px) and (max-width: 767px) {
	.pc{
		display: none;
	}
	
	.mobile {
		display:block ;
	}
}

これらのプロパティを使用すると、特定の画面またはブラウザのサイズに基づいて出力されるコンテンツを選択できます.オブジェクトの出力を表示:none;属性を使用します.

width値に基づいてコネクタを直感的に確認できます。

300 px以下768 px:スマートフォン

768 px以下1024 px:タブレット

1204以降:PC

viewportメタラベル

<meta name="viewport" content="width=device-width, initial-scale=1.0">

常にmediaqueryを使用するタグに適用されます.Webサイトに接続されているアプライアンスのサイズに応じてスケールを変更するラベル.
https://www.w3schools.com/css/css_rwd_viewport.asp

メーカー/機種別に画面サイズとスケール情報を提供するサイト

media query standard devise
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Google Chromeが提供する開発ツールは、メーカー/機種の画面からWeb画面を出力する機能を提供しています.複数の画面を追加または削除したり、構成をカスタマイズしたりできます.
Mediaqueryの注意点
Mediaqueryに入力されていないプロパティは、他のプロパティに継承され、適用されます.プロパティを適用する場合は、確認作業が必要です.