글씨 크기 조절 자동화 (휴대폰 사이즈일 경우) / rem이란?

 

vars.scss 에서 설정한 폰트 사이즈는 16px 이며, 화면이 800px보다 작을 경우(= 휴대폰 사이즈일경우) 14px로 바뀌게 되어있다. 

header.scss에서 폰트 사이즈를 16px로 설정해 놓으면 vars.scss와 연결되어 따로 설정해두지 않더라도 휴대폰으로 접속시 14px으로 폰트 사이즈가 변경된다. 

 

---

16px는 1rem이다. 

 

rem은 root + em 으로 root의 폰트 사이즈에 의해 결정되기 때문에 vars.scss에 저장해둔 폰트사이즈가 1rem으로 적용되는 것이다.