@media (orientation: 방향) {
선택자 {
속성: 속성값;
}
}
orientation은 사용자의 디바이스 또는 브라우저의 방향을 의미하며 다음의 두 가지 값으로 나타낼 수 있다.
portrait: 세로 방향
landscape: 가로 방향
✓ PC의 경우 브라우저의 가로x세로의 영향을 받는다.
✓ 예를 들어 브라우저 창의 사이즈를 조정하여 가로x세로의 크기를 조정해서 보면
가로사이즈가 세로사이즈보다 크면 landscape 이 적용 되고
세로사이즈가 가로사이즈보다 크면 portrait 이 적용 된다.
사용 예)
@media (orientation: portrait) {
.main-container {
background-color: orange;
}
}
@media (orientation: landscape) {
.main-container {
background-color: sky;
}
}