210709開発ログ

9187 ワード
大邱AI学校 CSS Webプログラミング メディアクエリ html テキストリンク
📌 学習の内容

メディアクエリ


:CSSクエリーで、Webサイトとモバイル、タブレット環境を自然に変更

  • ≪アダプティブ｜Adaptive｜oem_src≫:割り込み時にスペースのサイズを変更します.
    ->固定px単位で作成

  • 反作用:自然なresize->%単位を使用
  • @media (min-width: ) and (max-width: px) {}
    • <メディアクエリを使用する場合、width値に基づいてブレークポイントを設定(分割)します.>
  • 300 pxから768 px以下:スマートフォン
  • 768 pxから1024 px以下:タブレット
  • 224 px以上~:PC 
    • @media (min-width: 600px) and (max-width: 767px) {
	.pc {
		color: blue;
		font-size: 20px;
		background-color: yellow;
	}
@media (min-width: 100px) and (max-width: 599px) {
	.pc {
		color: green;
		font-size: 10px;
		background-color: grey;
	}
}
  • フェーズ
    • 👉 メディアクエリーの外部で作成されたコードは、メディアクエリーに継承されます.
    ->pcバージョンのcss(メディアクエリの外部で作成されたコード)は確認する必要があります.or pcバージョンと移動バージョンを異なるファイルとして作成する
    <メディアクエリを使用する場合は、<meta>を挿入する必要があります>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 
viewport = 웹사이트에 접속하는데 사용되는 기기의 화면(자동으로 스케일업)
width= decive-width = 웹사이트의 width값은 디바이스의 width값으로 적용
initial-scale=1.0 = 비율은 항상 1.0을 유지 
-->

    (画像ソース:https://www.w3schools.com/css/css_rwd_viewport.asp)
    すべてのデバイスサイズのwidth値
    : https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
    (縦モード/横モード)
    <作成されたメディアクエリの検証>

  • dothomeからサーバにアップロードした後に作成されたドメインアドレスを直接決定します(最も正確で限られたデバイスとして決定されます).

  • chromeブラウザの「チェック」機能を使用して検証します(別のデバイスに適用され、他のデバイスに使用できます).
  • 作業指示1display: none;:デバイスタイプに応じて、ユーザが露出しない要素を非表示にする(テキスト情報を提供する)
    • <h1 class="pc">PC Hello World</h1>
<h1 class="mobile">Mobile Hello World</h1>
    .pc {
	display: none;

	color: red;
	font-size: 50px;
	background-color: pink;
}
  • ビジネステクニック2
    :(メディアクエリーアプリケーション)@media、バージョン
    • <h1>미디어쿼리 응용</h1>
    h1 {
	font-size: 20px;
	background-color: yellow;
}   /* => mobile version */

@media (min-width: 768px) {
	h1 {
		font-size: 40px;
		background-color: pink;
	}  /*-> max-widht는 1024px이 된다 */
      /* => tablet version */
    
@media (min-width: 1024px) {
	h1 {
    font-size: 80px;
	background-color: grey;
}   /* => pc version */
    👉 単純から複雑な順序でコードを記述する
    (mobile version->tablet->pc version)、コード成分が減少します.
    📌 学習内容の難点
  • 「実践tip 1」のdisplay: none;属性は、デバイスタイプがユーザにどの要素を露出するかを決定する
    📌 解決策
    実は難しい部分というより少し混同しています前半はblock、inline-block要素を使って空間を作成することを学びましたが、この部分と混同してdisplay: none;度の空間に関連する部分ですか?と思います.しかし、調査結果は「見せない」だけだった.visibility: hidden;というように考えることができます.
    📌 学習の心得.
    あまり難しい部分はありません今ではいくつかの概念をマスターして、整理する必要があると思います.週末の間、2週間の学習内容を整理し、より正確な概念を身につける必要がある.また、個人サイト制作にも進出する.焦らないで、注意して、明確にしなければなりません!🏃‍♂️
    • [git]ブランチ、メインコンセプト🚚🏎🚛
    [データベース]MySQLの基礎知識