@media

@media 미디어타입 and (미디어 특성){ css코드 }

 

미디어 타입

all :모든 미디어 타입에 적용

screen: 컴퓨터 화면, 타블렛, 스마트폰

print: 인쇄 전용

 

미디어 특성

width 뷰포트 가로 너비

max-width 뷰포트 최대 가로 너비(이하)

min-width 뷰포트 최소 가로 너비(이상)

height 뷰포트 세로 너비

max-height 뷰포트 최대 세로 너비(이하)

min-height 뷰포트 최소 세로 너비(이상)

orientation 뷰포트 방향(portrait, landscape) portrait(세로가 더 긴 상태) landscape(가로가 더 긴 상태)

 

<div class="container"><div>

<style>
.container{
width: 100px;
height: 100px;
background: red;
}

/* 최소 너비가 700px 이상이면 css적용 */
@media screen and (max-width: 700px){
.container{
height: 300px;
background: blue;
	}
}

</style>