100vw / vh 와 100% 단위 알고 함수를 만들어보자!

 

 

예전 에이전시에서 일할 때 사수분이 반응형 작업시 사용하기 편하게 scss 함수를 이용해 계산할 수 있는 방법을 알려주셨다.

그때는 이해가 부족해서 무작정 쓰기만 했는데, 지금은 뭔가 사용해보고 싶어서 구글링을 하게 되었다.

 

일단 개념부터 봐보자. 

 

개념 

vw / vh : 현재 실행중인 스크린 크기에 따라 반응한다. (스크롤바 포함)

% : 부모 요소에 반응한다. (스크롤바 포함X) 

 

 

함수 만들어 쓰기

: 화면의 크기를 가져와 사이즈를 계산해보자. 

 

@function get-vw($target) { 
  $vw-context: (1000*.01) * 1px;
  @return ($target/$vw-context) * 1vw;
}

 

h1 {
  font-size: get-vw(72px);
}

 

정리하면 vw 뷰포트의 1%이므로 px 비율로 크기를 조정할 수 있다.

반환 값은 다른 요소에 사용할 수 있다. 

 

 

 

출처

 

https://stackoverflow.com/questions/32005686/get-device-size-in-sass

Get device size in SASS

불러오는 중입니다...