반응형 웹디자인 viewport 미디어쿼리

Viewport

meta 태그를 이용해서 화면의 크기나 배율을 조절해 줘야 미디어 쿼리가 정상적으로 작동할 수 있다.

뷰 포트 속성

initial-scale : 초기배율 ,기본 값은 1

user-scalable : 뷰포트의 확대/축소 여부지정 , 기본값은 yes ,no로 설정하면 사용자가 페이지 확대를 할수 없다.

minium-scale : 뷰포트의 최소 축소 비율 지정 , 기본값은 0.25

maxium-scale : 뷰포트의 최대 확대 비율 , 기본값은 5.0

zoom :1 = initial-scale 속성과 동일

min-zoom :1 = minium-scale 속성과 동일

max-zoom :1 = maxium-scale 속성과 동일

user-zoom :1 = user-scale 속성과 동일

웹 브라우저의 크기가 760px 이상일 경우 css가 적용된다.

미디어 쿼리 기본 문법

미디어 유형과 and또는, 콤마 논리 연사자로 조건을 적용한다.

인터넷 익스플로러6,7,8버전에서는 미디어 쿼리를 지원하지 않는다.

@media

미디어 쿼리 문법의 시작을 알리는 부분

미디어유형

all : 모든장치

print : 인쇄장치

screen : 컴퓨터 화면 장치 또는 스마트 기기의 화면

tv : 음성과 영상이 동시에 출력되는 장치

projection : 프로젝트 장치

speech : 음성 출력 장치

ttr : 디스플레이 기능이 제한된 장치

조건문

width : 웹페이지의 너빗값

height : 웹페이지의 높잇값

device-width : 기기의 가로 너빗값

device-height : 기기의 세로 높잇값

orientation : 기기의 화면 방향 (portrait : 세로 , landscape : 가로)

aspect-ratio : 화면비율 (1:1 , 16:9 , 1280:720)

device-aspect-ratio : 단말기의 화면 비율 (1:1 , 16:9 , 640:320)

color : 기기의 비트수 (8비트)

MIN/MAX(접두사 구문) MIN : 최소 , MAX : 최대 라는 의미

주의사항

띄어쓰기 주의

@media all and (min-width:320px){실행문}