css_반응형 웹과 뷰포트

jhson·2023년 12월 18일
0

css

목록 보기
20/28
post-custom-banner

Viewport

  • 뷰포트란 현재 화면에 보여지고 있는 영역
  • 기기 별로 뷰포트는 다름
  • 따라서 동일한 웹 페이지라도 기기에 따른 배율 조정이 발생해 화면 크기가 다르게 보이는 현상이 나타남

Viewport 설정으로 기기에 따른 배율 설정하기

```

Viewport 단위

-vw : 뷰포트 너비의 100분의 1
-vh : 뷰포트 높이의 100분의 1
-vmin : 뷰포트 너비와 높이 중 작은 쪽의 100분의 1
-vmax : 뷰포트 너비와 높이 중 큰 쪽의 100분의 1

font-size: 10vmin;

10vw : 너비의 10분의 1 
10vh : 높이의 10분의 1
10vmin : 너비와 높이 중 작은 것에 10분의 1
10vmax : 너비와 높이 중 큰 것에 10분의 1
profile
게임회사 주니어 개발pm에서 프론트엔드 개발자로 전향하는 과정

0개의 댓글