반응형 웹 - 뷰포트와 미디어쿼리 (viewport , mediaquery)

1.뷰포트 Viewport

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

뷰포트속성

속성명	속성값	속성설명
width	device-width, 양수	뷰포트의 너비를 지정합니다.
height	device-height. 양수	뷰포트의 높이를 지정합니다.
inital-scale	양수	뷰포트의 초기 배율을 지정합니다. 기본값은 1입니다. 1보다 작은 값을 사용하여 축소된 페이지를 표시하고, 1보다 큰 값을 사용하여 확대된 페이지를 표시합니다.
user-scalable	yes, no	뷰포트의 확대/축소 여부를 지정합니다. 기본값은 yes이며 no로 설정하면 사용자가 페이지를 확대 할 수 없습니다.
minimum-scale	양수	뷰포트의 최소 축소 비율을 지정합니다. 기본값은 0.25입니다.
maximum-scale	양수	뷰포트의 최대 확대 비율을 지정합니다. 기본값은 5.0입니다.

※minimum-scale과 maximum-scale 속성은 각각 값을 1.0으로 지정할 경우 user-scalable를 yes로 지정하더라도 사용자가 화면을 확대 축소 할 수 없습니다.

2. 미디어쿼리 MedaiQuery

미디어쿼리의 기본문법

@media [only 또는 not] [미디어유형] [and 또는 ,콤마] (조건문) {실행문}

ex) @media only screen and (max-width:786px){width:100%}

[only 또는 not]

only 키워드는 미디어쿼리를 지원 하는 브라우저에서만 해석하게 해주는 키워드입니다.

not은 다음에 오는 조건을 부정하는 키워드 입니다. 예를 들어 not tv일 경우 tv를 제외한 모든 미디어유옇에만 적용됩니다.

※ie 6, 7, 8은 미디어 쿼리를 지원하지 않기 때문에 only 키워드는 작성하지 않습니다.

[미디어유형]

기기명	설명
all	모든 장치
print	인쇄 장치
screen	컴퓨터 화면 장치 또는 스마트 기기의 화면
tv	영상과 음성이 동시에 출력되는 장치
projection	프로젝터 장치
handheld	손에 들고 다니는 소형장치
speech	음성 출력 장치
aural	음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)
embossed	점자 인쇄 장치(화면을 읽어 종이에 점지를 찍어내는 장치)
tty	디스플레이 기능이 제한된 장치
braille	점자 표시 장치

[and 또는 ,콤마]

@media A and B{실행문} - A,B 가 모두 사실일때 실행합니다.

@media A , B{실행문} - A, B중 하나만 사실이더라도 실행합니다.

※생략가능합니다.

(조건문)

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

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

조건문	설명	조건값	min/max 사용 여부
width	웹페이지의 가로 너비값	width속성에서 사용할 수 있는 모든 속성값	사용함
height	웹페이지의 세로 높이값
device-width	기기의 가로 너비값
device-height	기기의 세로 높이값
orientation	기기의 화면 방향	portrait(세로) , landscape(가로)	사용안함
aspect-ratio	화면비율	브라우저 화면비율(1) 브라우저 종횡비(16/9) 브라우저 해상도(1280/720)	사용안함
device-aspect-ratio	단말기의 화면비율	기기 화면비율(1) 기기 종횡비(16/9) 기기 해상도(640/320)	사용함
color	기기의 비트 수	8(bit 단위)
color-index	기기의 색상 수	128(색상 수 단위)
monochrome	기기가 흑백일때 픽셀당 비트 수	1(bit 단위)
resolution	기기의 해상력	300dpi/dpcm
scan	TV의 스캔 방식	progressive/interlace	사용안함
grid	기기의 그리드/비트맵	0(비트맵 방식) / 1(그리드 방식)

미디어쿼리 적용방법

1. <link rel="stylesheet" href="style.css" />

2. <link rel="stylesheet" media="all and (min-width:320px)" href="style.css" />

3. @import url(style.css) all and (min-width:320px);

미디어쿼리 작성시 주의사항

1. min을 사용할때는 반드시 작은 순서대로 작성 (min은 최소 또는 그이상이라 는 뜻으로, 점차 커지는 것을 의미하기 때문에)

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

@media (min-width:768px){실행문}

@media (min-width:1024px){실행문}

2. max 사용시 큰순서대로 작성 (max는 최대 또는 그 이하라는 뜻으로, 점차 작아지는 것을 의미하기 때문에)

@media (max-width:1600px){실행문}

@media (max-width:1024px){실행문}

@media (max-width:768px){실행문}