学習の内容🕵️‍♂️

⭕メディア照会コースの内容

サイトの特徴

🔘 アダプティブネットワーク

>カチッと折れてスペースが大きくなりました.固定画素値(pc/移動)

🔘 はんのうがたネットワーク

>通常は%ですので、形状に応じて自然にサイズを変更します.
☑ レイアウトプロパティによる画面操作の確認

✅ media query

🔷 作成したWebサイトを各アプライアンスの環境のコードに変更します。

⭕pc/モバイルコードは異なるアプリケーションが必要です.
メディアクエリの外部のコードも内部の影響を受けるため、単独で作成するか、いつでもチェックする必要があります.
(cssファイルを簡単に分割する方法もあります)
110 mediaqueryを使用する場合に使用するmetaタグ

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

1.視点=>Webサイトを使用するデバイスを示す画面
2.width値をデバイスのwidth値に適用し、比率を1.0に維持します.
viewportを適用する前/後で比較できます
アプライアンス別の適用幅の表示を許可
⭕ T I P !!

.pc {	
	display: none;
	color: red;
	font-size: 50px;
	background-color: pink;
    }
.mobile{
	display: none;
    }
@media (min-width: 320px) and (max-width: 760px) {
	.pc {
		display: none;
	}
	.mobile{
		display: block;
	}
}

メディアqueryとディスプレイを組み合わせると、必要なデバイス上で必要な情報を表現することができます.

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}
=====> portrait - 스마트폰을 세로로 들었을 때의 화면

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
}
=====> landscape - 스마트폰을 가로로 들었을 때의 화면

1.各機器レイアウト画面の変化が見られる.
2.media query画面を表示可能

学習内容の難点🤦‍♂️

🔘 互換作業は難しいと思っていたのですが、思ったほど難しくはなく、ただ丁寧な部分が必要でした.これまで、内容が他の資料を参考にしながら応用されていたのであれば、今回は資料を参考にして、必ず入れるような感じで、

解決方法🙋‍♂️

🔘 他の機器がないので、直接確認できませんでしたが、テストサイトで簡単な確認作業をしました.

学習の心得.🙇‍♂️

🔘 今日も少しシンプルで複雑な微妙な感じで、感覚を失わないよう頑張ります!