CSS) vmin, vmax

1. vmax
vmax: viewport의 최대 넓이
가로와 세로 중 더 넓은 사이즈를 백분율로 계산

css

.container {
  width: 50vmax;
  height: 200px;
  background: red;
}

 

html

<div class="container">
</div>

 

출력

▷ 가로 값이 세로보다 길기 때문에 가로 viewport 넓이의 50%를 가로 넓이로 표시

▷ 세로 값이 가로보다 길기 때문에 세로 viewport 넓이의 50%를 가로 넓이로 표시

 

2. vmin
vmin: viewport의 최소 넓이
가로와 세로 중 더 좁은 사이즈를 백분율로 계산

css

.container {
  width: 50vmin;
  height: 200px;
  background: red;
}

 

html

<div class="container">
</div>

 

출력

▷ 세로 값이 가로보다 짧기 때문에 세로 viewport 넓이의 50%를 가로 넓이로 표시

 

▷ 가로 값이 세로보다 짧기 때문에 가로 viewport 넓이의 50%를 가로 넓이로 표시