반응형
1. 뷰포트는 <meta>태그를 통해 <head>와 </head> 태그 사이에 작성
<meta name="viewport" content="속성1=값1", "속성2=값2".....>
content 안에서 사용하는 속성은 아래 와 같다.
|
종류
|
설명
|
사용 가능한 값
|
기본 값
|
|
width
|
뷰포트 너비
|
device-width 또는 크기
|
브라우저 기본 값
|
|
height
|
뷰포트 높이
|
device-height 또는 크기
|
브라우저 기본 값
|
|
user-scalable
|
확대, 축소 가능여부
|
yes 또는 no
(yes는 1로, device-width와 device-height 값은 10으로 간주 |
yes
|
|
initial-scale
|
초기 확대 축소 값
|
1~10
|
1
|
2. 뷰포트 단위
뷰포트 개념이 등장하면서 뷰포트 단위가 생겼는데 아래와 같다.
- vw(viewport width): 1vw는 뷰포트 너비의 1%와 같음
- vh(viewport height): 1vh는 뷰포트 높이의 1%와 같음
-vmin(viewport minimum): 뷰포트의 너비와 높이 중에서 작은 값의 1%와 같다.
-vmax(viewport maximum): 뷰포트의 너비와 높이 중에서 큰 값의 1%와 같음.
예를 들어 뷰포트의 너비가 1000px, 800px 일결우 1vw 10px, 1vh는 8px이 되는 것이다.
1vmin은 작은 값인 800px의 1%로 8px이 되고 vmax는 10px이 되는 것임.
반응형