미디어 쿼리 구문, 미디어 쿼리의 종류, 디바이스, 연산자, 속성 값, 가로와 세로의 너비 조정 예

 

 

미디어 쿼리 구문

미디어 쿼리 문법은 대소문자를 구별하지 않습니다.

 

 

미디어 쿼리의 종류

·       디바이스,

·       연산자,

·       속성 값

 

 

디바이스

속성값	설명	예
all	·       모든 디바이스를 대상	media="all"
screen	·       컴퓨터 화면을 대상	media="screen"
print	·       인쇄 미리 보기를 대상 ·       실제 인쇄매체를 대상	media="print"
orientation	·       디바이스의 방향을 대상 ·       portrait(세로로 길게) ·       landscape(가로로 길게)	media="orientation: portrait"   media="orientation: landscape"

 

 

 

연산자

속성 값들을 합쳐서 사용할 때 사용됩니다.

연산자	설명	예
and	And 연산자 역할 수행	media="screen and (orientation: portrait)"
,	Or 연산자 역할 수행	media="screen, print"

 

 

 

속성 값

width와 height를 이용해서 가로와 세로의 너비를 조절합니다.

속성	설명
width	·       대상 매체의 해상도 너비 값을 지정해서 미디어 쿼리가 만족하는 조건을 설정 ·       ‘min-’, ‘max-’의 접두어로 범위 지정 가능
height	·       대상 매체의 해상도 높이 값을 지정해서 미디어 쿼리가 만족하는 조건을 설정 ·       ‘min-’, ‘max-’의 접두어로 범위 지정 가능

 

 

가로와 세로의 너비 조정 예

media="screen and (min-width:420px)" media="screen and (max-height:720px)"