기기별 해상도 - 반응형 웹 설정하는 법 (@media)

px to rem 꿀팁 사이트: https://codebeautify.org/rem-to-px-converter

• 낮은 해상도의 PC, 태블릿 가로 : ~1024px = 64rem
• 테블릿 가로 : 768px ~ 1023px = 48rem
• 모바일 가로, 태블릿 : 480px ~ 767px = 20rem ~ 30rem

 

 

 

반응형 웹을 사용하기 위해 @media를 CSS파일에 따로 설정해주어야한다.

{} 대괄호 잊지말고 사이즈별로 따로 설정해주어야 반응형 웹이 설정됨.

@media (max-width:48rem) {
/* 해상도가 48rem 즉768px보다 작으면 (max 까지) font size를 0.8rem으로 변경 */
	.container{
		font-size: 0.8rem;
	}
	.content{
		font-size: 1em;
	}
}

@media (min-width:62rem) {
/* 해상도가 48rem 즉992x보다 크면 (minimum이 아니라면) font size를 1.5rem으로 변경 */
	.container{
		font-size: 1.5rem;
	}
	
	.contentTitle{
		font-size: 1em;
	}
	
	.content{
		font-size: 1em;
	}

}