px -> rem 변환 함수 (rem mixin)

 

 
반응형 디자인, 접근성, 유지보수 때문에 px보다는 rem을 많이 쓰는 추세다.
rem은 루트 폰트 크기를 기준으로 하기 때문에 수정이 필요할때는 일괄적으로 조절을 할 수 있다.

 

css단위 px, em, rem이란?

⬆️ ⬆️ ⬆️ 이건 예전에 내가 정리했던 css 관련 게시글.
 
 
작업을 할때는 보통 1rem = 16px로 작업을 한다.
 
그렇지만 작업자가 매번 rem을 계산하기에는 매우 귀찮기 때문에
px ➡️ rem으로 변환해주는 mixin 함수를 미리 만들어놓으면 작업할 때 매우 편하다!!
 

// 변환함수
@function rem($px) {
  @return ($px / 16) * 1rem;
}

 

//사용 예시
.text {
  font-size: rem(24);     // 1.5rem 반환
  margin-bottom: rem(32); // 2rem 반환
}