반응형 font-size rem 단위

rem단위
기준	- root(html) em: html의 폰트크기를 기준으로한 상대크기 - em은 부모에서 상속받은 폰트크기가 기준 (각각의 부모에 상속되어 부모의 크기에 따라 실제 폰트가 다 달라지기 때문에 사용권장안함 단 rem은 html 상속받기 때문에 em 보단 사용가능)
사용법	- rem단위사용시 브라우저 접근성메뉴를 통한 폰트크기 확대기능 사용가능(저시력자) - 레이아웃에는 사용하지않으며 font-size만 사용할것(레이아웃에 사용시 화면이 깨질수있음)
지정법	- html {font-size:62.5%;} 브라우저 기본값 16px -> 10px로 환산 - body {font-size: 1.6rem;} 디자인의 폰트기본크기 지정 - .gnb>li>a {font-size:1.5rem;} font-size:62.5% / 10px 로 초기화 할 경우 font 사이즈를 설정할때 편리하다 (16px>1.6rem / 20px > 2rem
적용법	- 테스트시 pc크롬: 브라우저설정-모양-글꼴크기 안드로이드크롬: 설정-접근성-텍스트크기조정 iOS사파리 주소창왼쪽 글자아이콘
주의	- 모바일크롬버그로 인해 안커지는 부분이 있을수있음 https://stackoverflow.com/questions/20099844/chrome-not-respecting-rem-font-size-on-body-tag#20206725 - 모바일크롬에서 부모에 높이가 잡혀있을경우 안커짐
	erm은 사이트 성격을 잘 파악하고 적용해야한다.  필수가 아니기 때문에 데탑에 적용하고 정작 복잡한 반응형 요소엔 font가 픽스 되어 무용지물이 됨 따라서 폰트에 권장사용 (패딩 필수아님)

 

 

 

---

반응형 모바일 페이지를 봤을때 

body에 

font-size: 1.6rem;  브라우져 폰트 크기에 따라 반응

 

rem 단위가 사용된게 보인다. 

 

 

 

왜쓸까??

 

접근성 때문

장애인이나 저시력자 때문에 사용한다. 

단 필수는 아님

 

때문에 관공서,대기업,솔루션 성격의 홈페이지에 맞으며 일반기업을 굳이 사용하지않음

 

---

크롬 브라우저 글꼴크기 환경을 변경했을때 자동적용이 된다.

 

 

 

 

 

---

아주작게 적용시 

 

---

아주크게 적용시

 

 

 

 

 

 

 

 

참고

http://nni.namandnam.com/ko/main