미디어 쿼리에 엄청난 양의 코드를 넣지 않고도 즉시 반응형 사이트를 만드는 간단한 CSS 트릭

이봐, 조쉬가 또 왔어. 최근에 저는 Ruby on Rails와 React.js로 프로젝트를 빌드하는 방법을 보여주고 있습니다. 오늘은 조금 다른 것을 보여드리겠습니다. 웹 사이트를 반응형으로 쉽게 만드는 방법입니다.

반응형 웹사이트용 CSS를 작성했다면 미디어 쿼리를 작성하는 것이 얼마나 힘든 일인지 알 것입니다. 이 반응형 기술은 각 미디어 쿼리에 대한 글꼴 크기만 변경하는 것입니다.

픽셀을 사용하는 대신 'rem' 단위를 사용하는 것이 전부입니다. 다음과 같이 작성하는 데 익숙할 수 있습니다.

.my-class {
 margin-top: 16px;
}

'px' 단위를 사용하는 대신 'rem' 단위를 사용해야 합니다. 그러나 '렘' 단위는 어떻게 작동합니까?

'Rem'은 루트 em을 의미하며 루트 글꼴 크기에 따른 동적 값입니다. 브라우저 기본 글꼴 크기는 16px입니다. 즉, 1 rem == 16px를 의미합니다. 위의 예에서 다음을 사용할 수 있습니다.

.my-class {
 margin-top: 1rem;
}

그러나 그것은 지금 당장은 아무것도 바꾸지 않습니다. 우리는 우리 클래스의 상단에 동일한 마진을 가지고 있습니다. 그래서 우리는 왜 이것을 했습니까?

이제 미디어 쿼리에서 글꼴 크기를 변경할 수 있으며 이렇게 하면 'rem' 단위를 사용하는 모든 항목이 변경됩니다.

@media only screen and (max-width: 600px) {
  html {
    font-size: 80%;
  }
}

이렇게 하면 글꼴이 루트 em의 80%(현재 16px)가 됩니다. 즉, 이 미디어 쿼리에서 글꼴 크기는 12.8픽셀이 됩니다. 그리고 여러분이 작성한 다른 모든 CSS는 이제 이 12.8px 값을 기반으로 합니다.

HTML 파일의 글꼴 크기를 변경하면 rem 단위를 사용하는 다른 모든 항목이 변경됩니다.

이것이 얼마나 강력한지 즉시 알 수 있습니다. 미디어 쿼리에 많은 CSS를 작성하는 대신 글꼴 크기를 조정하기만 하면 됩니다. 물론 CSS를 더 추가해야 할 수도 있지만 이것이 대부분의 어려운 일입니다.

또한 16px 값(브라우저의 기본값)을 기준으로 하는 대신 미디어 쿼리 없이 html 요소에 글꼴 크기를 설정할 수 있습니다.

html {
  font-size: 62.5%;
}

CSS 및 웹 개발의 다른 부분에 대한 모든 새 기사를 볼 수 있도록 .