rem 단위를 사용
프론트엔드 개발자로서 반응형 디자인에서 미디어 쿼리를 최소화하기 위해 rem 단위를 사용할 수 있다. rem 단위는 일반적으로 html 요소인 문서의 루트 요소에 상대적이다. 여기서 루트 요소는 브라우저를 뜻하는데, 브라우저의 기본 글꼴이 16px라고 가정한다면 1rem은 16px가 되는 것이다. 브라우저의 기본 글꼴을 24px로 설정해 두었다면 1rem은 24px가 된다. 프론트엔드 개발자는 글꼴의 크기를 설정할 때 rem을 사용하여 사용자가 브라우저가 설정해 둔 루트 요소에 상대적인 값을 줄 수 있고, 이는 미디어쿼리를 최소화 하게되는 효과를 가진다.
레이아웃을 유연하게 설계
레이아웃을 유연하게 설계하면 미디어쿼리를 최소화할 수 있다. 레이아웃을 유연하게 하는 방법에는 다음과 같은 방법들이 있다.
-
그리드 시스템을 사용한다. 그리드 시스템은 웹사이트의 레이아웃을 일관되게 유지하면서도 유연하게 만들어준다. 그리드 시스템을 사용하면 웹사이트의 레이아웃을 쉽게 조정할 수 있다.
-
유연한 이미지를 사용한다. 이미지는 웹사이트에서 중요한 역할을 한다. 따라서 이미지를 유연하게 사용하여 다양한 디바이스에서도 잘 보일 수 있도록 해야 한다.
-
CSS Flexbox를 사용한다. CSS Flexbox는 그리드 시스템과 비슷한 역할을 하면서도 좀 더 유연하게 레이아웃을 구성할 수 있다.
웹을 디자인할 때, 레이아웃을 유연하게 설계하여 디자인하게 되면 미디어쿼리를 최소화 시킬 수 있다.
지금까지 반응형 작업 시, 미디어쿼리를 최소화하는 방법을 알아보았다.
