@media 미디어 쿼리 속성, 장치의 회전 orientation

@media 미디어 쿼리 속성, 장치의 회전 orientation

 

미디어 쿼리에는 여러가지가 있지만 자주쓰이는게 있다면 width와 orientation이다.

Portrait 초상화 세로모드

Landscape 풍경화 가로모드

// orientation: 장치의 방향
@media screen and(orientation:portrait){
	html{}
}
@media screen and(orientation:landscape){
	html{}
}

 

 

외 속성은 한번 읽어보며 이런것들이 있다~ 정도만 알아두도록 하자.

orientation: 장치의 방향
width: 화면의 너비
height: 화면의 높이
device-width: 장치의 너비
device-height: 장치의 높이
device-aspect-ratio:화면의 비율
color:장치의 색상 비트
color-index: 장치에서 표현 가능한 최대 색상 개수
monochrome: 흑백 장치의 픽셀당 비트 수
resolution: 장치의 해상도