// 가로너비가 1025px 이상인 경우 적용 : PC
@media screen and (min-width: 1025px){ .. }

// 가로너비가 750px 이상 1024px 이하 : 
@media screen and (min-width: 750px) and (max-width: 1024){ .. }

// 뷰포트의 가로너비가 749px 이하인 경우 적용 : MO
@media screen and (min-width: 749px){ .. }

// 장치가 가로 방향인 경우 적용
@media (orientation: landscape){ .. }

// 장치가 세로 방향인 경우 적용
@media (orientation: portrait){ .. }

// 사용자가 요소 위에 마우스 커서를 올릴 수 있는 환경인지 : 터치 스크린 및 키보드 네비게이션은 불가능
@media (hover: hover){ .. }

논리 연산자

and : 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용(and 연산자와 같은 동작)

not : 쿼리가 거짓일 때만 참을 반환, Level 3 모듈에서는 not 키워드 사용시 단일 미디어 쿼리에 not 연산은 불가능하며, 전체 쿼리만 not 연산이 가능합니다.

only​ : 전체 쿼리가 일치할 경우에만 스타일 적용

,(쉼표)​ : 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참(or 연산자와 같은

// 논리곱 미디어 쿼리
// screen 유형 + (min-width: 400px) + (orientation: landscape)
// 모두 참이어야 적용
@media screen and (min-width: 400px) and (orientation: landscape){ .. }

// 논리합 미디어 쿼리
// screen and (min-width: 400px) 혹은 screen and (orientation: landscape)
// 둘중 하나라도 참이면 적용
@media screen and (min-width: 400px), screen and (orientation: landscape){ .. }

// 부정 논리 미디어 쿼리
// 보기 방향이 세로일 경우에만 적용
@media not all and (orientation: landscape){ .. }