미디어쿼리와 폰트 사이즈를 이용하여 반응형, 모바일 레이아웃, print 등등 설정하기 - css

css 폰트 사이즈(font-size)를 사용하여 전체 화면의 레이아웃 조절

---

common.css 같은 공통 css에 기본 폰트 사이즈 지정

html{font-size:10px;}

css를 적용할 때 px 대신 rem 사용

.wrap{margin:10rem;}
.div{width:20rem;}
.txt, a, p{font-size:1.5rem;}

rem은 html{font-size:10px;} 로 설정한 크기가 기준. 1rem = 10px

px은 1px만 사용.

브라우저 길이나 해상도 등에 맞게 전체적으로 레이아웃의 크기를 변경할 때는 미디어쿼리를 사용

@media screen and (max-width:820px){
  html{font-size:20px;}
}
@media screen and (max-width:414px){
  html{font-size:15.7px;}
}
@media screen and (max-width:360px){
  html{font-size:12.4px;}
}

위와 같이 css에서 html의 기본 폰트 사이즈를 지정하면, 미디어쿼러를 이용하여 브라우저 크기에 따라 전체적으로 사이즈가 조절 가능.
(예: 웹 화면에서 width가 20rem 이라면 실제 200px로 표현되지만, 미디어쿼리에 지정한 사이즈에 따라 width가 400px, 314px, 248px 로 표현된다.

미디어쿼리를 이용하여 html의 font-size를 조절하면 웹/모바일 브라우저에 상관없이 레이아웃이 안깨지고 보는데 문제 없는 수준으로 나올 수 있게 간단히 만들 수 있다.

print css

@media print {
  header,
  footer,
  aside,
  nav,
  form,
  iframe {
    display: none;
  }
  table,
  img,
  svg {
    break-inside: avoid;
  }
  body {
    width: 100%;
  }
  .page {
    break-before: always;// 바로 앞에서 페이지 남은 공간 건너뛰고 다음 페이지에서 출력하기
    page-break-before: always;
  }
}
@page {
  margin: 0cm;
  size: A4;
}