学習内容

1.メディア照会

html, body {
	margin: 0;
	padding: 0;
}

h1 {
	margin: 0;
	padding: 0;
}

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

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

/* 320px ~ 768px미만 : 스마트폰 */
/* 768px ~ 1024px미만 : 태블릿 */
/* 1024pc 이상 : PC */

/* 미디어 쿼리 */
/* 브라우저 사이즈가 미디어 쿼리에서 지정한 크기에 도달하면 미디어 쿼리에서 지정한 css로 바뀐다. */
/* 최소값 min을 정해두었기 때문에 600px 이하로는 다시 원래 지정한 css로 돌아간다. */

@media (min-width : 600px) and (max-with: 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;
	}
}

1-2)メディアクエリを使用する際の注意事項

①背景色を設定する必要があります

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

@media (min-width : 600px) and (max-with: 767px) {
	.pc {
		color: blue;
		font-size: 20px;
		/*background-color: yellow;*/  /* background-color를 따로 설정해주지 않으면 pc버전에서의 배경색이 상속되므로 반드시 확인 */
	}

②viewport metaラベルを記入する必要があります。

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

2.有用なサイト

1）各機器の幅寸法

2)chromeのWebサイトでモバイルcssコードを表示する方法

マウス右クリック→チェック→スマートフォンアイコン、
スマホの画面で確認できます.

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

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

3.メディア照会実務提示

1)PCバージョンとモバイルバージョンで表示される内容が異なる設定方法

<h1 class="pc">PC Hello World</h1>     <!-- mobile버전에서는 보이지 않도록 -->
<h1 class="mobile">mobile Hello World</h1>     <!-- pc버전에서는 보이지 않도록 -->

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

.mobile {
	display: none;      /* pc버전에서는 보여지면 안된다. */
}


@media (min-with:  320px) and (max-width:  767px) {
	.pc {
		display: none;
	}
	.mobile {
		display: block;    /* inline이나 inline-block등 none외에 다른 속성값을 입력하면 된다. */
	}
}

2)移動-タブレット-pc順にメディアクエリーを作成する

<h1>미디어쿼리 응용</h1>

/* 모바일 버전을 먼저 만든다. */


h1 {
	font-size: 20px;
	background-color: yellow;
}

@media (min-width:  768px) {
	h1 {
		font-size: 40px;
		background-color: pink;
	}
}
/* min-width이상으로 설정되어 있으므로, 미디어쿼리 부분이 pc버전, 외부영역이 모바일 버전이다. */

@media (min-width:  1024px) {
	h1 {
		font-size: 0px;
		background-color: grey;
	}
}
/* min-width가 1024px인 미디어쿼리를 추가하게 되면 앞에 작성된 768px 미디어 쿼리의 max-width값은 자동적으로 1024px미만이 된다. */
/* 미디어쿼리 두 개 작성하게 되면서, 
마지막 미디어쿼리는 pc버전, 첫번째 미디어 쿼리는 태블릿 버전, 그 외부영역은 모바일 버전으로 작성된다. */
/* 이 순서로 작성하게 되면 코드 분량이 많이 줄어든다는 장점이 있다. */

難点と解決策

学習の心得.