미디어쿼리 요약

blog.naver.com/pcgun70/222158760340

CSS @media queries - 미디어 쿼리 요약

 

모바일화면 비중이 높다면 min,

PC화면 비중이 높다면 max

 

@media only all and (조건){실행}

 

@media - 미디어쿼리 선언

only - 기본값. 생략가능. not으로 부정할 수도 있음.

all - 미디어타입 지정(screen, tv, print, speech, all). 기본값. 생략가능.

and - 논리적연산. or 또는 콤마기호로 or 연산자 수행 가능.

조건 - 참일 때만 {실행} 처리.

실행 - 조건이 참일 때 실행 css 코드. 

 

1. 모바일 기준 화면(min)

width가 작은 화면부터 큰 화면 순으로.

2. PC 기준 화면(max)

width가 큰 화면부터 작은 화면 순으로.

3. 반응형웹을 위한 디바이스별 해상도(3분기점)

pc min768

태블릿 min480 max767

모바일 max479