css - 반응형, 모바일 레이아웃, 화면 사이즈별 레이아웃 크기, 폰트 사이즈로 간단히 조절

css, 폰트사이즈(font-size)로 전체적인 레이아웃의 크기 조절

 

common.css 같은 최상위 공통 css에 폰트의 기본 사이즈를 지정

html{font-size:10px;}

 

html tag에 대한 스타일을 적용할 때 rem 을 사용(px (x))

• rem은 기본 사이즈인 10px이 기준. 1rem = 10px
• em은 감싸는 태그에 있는 px이 기준이 되어서 깊이 들어갈수록 복잡하고 불편해짐
• px은 1px 이 아니면 사용할 필요가 없음

/* ......*/
.somewrap{margin-top:3rem;...}
.somediv{width:10rem;...}
.somep{font-size:2rem;...}
/* ......*/

 

스크린 사이즈, 해상도, 브라우저 넓이 등에 맞게 "전제적으로" 레이아웃의 크기를 변경 할 때

@media screen and (max-width:414px){
  html{font-size:20px;}
}
@media screen and (max-width:375px){
  html{font-size:16.7px;}
}
@media screen and (max-width:360px){
  html{font-size:12.2px;}
}
/* ....... */

 

위와 같이 css의 미디어쿼리로 html에서 기본 사이즈를 각각 지정하면, 브라우저의 크기에 따라 "전체적으로" 사이즈가 조절됩니다.

예: 웹 화면에서 font-size가 10rem 이라면 웹 브라우저는 100px로 표현되지만, 화면의 가로 길이가 414px(안드로이드 폰, 크롬)이라면 모바일 브라우저는 200px로 표현.

 

적절한 font-size 의 크기 조절로 웹/모바일 브라우저에서 크기에 상관없이 레이아웃이 안깨지고 잘 나올 수 있게 간단히 만들 수 있습니다.