미디어 쿼리의 조건

미디어 쿼리의 조건

웹 문서의 가로 너비와 세로 높이

뷰포트 : 실제 웹 문서의 내용이 화면에 보이는 영역

가로, 세로 값 설정하는 속성	설명
width, height	웹 페이지의 가로 너비, 세로 높이
min-width, min-height	최소 너비, 최소 높이
max-width, max-height	최대 너비, 최대 높이

ex) 뷰포트의 너비 600px 이상, 959px 이하

@media all (min-width: 600px) and (max-width: 959px) {
	...
}

단말기의 가로 너비와 세로 높이

속성	설명
device-width, device-height	단말기의 가로 너비, 세로 높이
min-device-width, min-device-height	단말기의 최소 너비, 최소 높이
max-device-width, max-device-height	단말기의 최대 너비, 최대 높이

ex) 단말기 너비가 320px 이상이고 높이가 480px 이상일 때 실행할 미디어 쿼리

@media all and (min-device-width: 320px) and (min-device-height: 480px) {
	...
}

화면 회전

속성	설명
orientation:portrait	단말기 세로 방향
orientation:landscape	단말기 가로 방향

ex)

@media screen and (orientation:landscape) {
	body {background-color: orange; }
}