미디어쿼리는 반응형 웹 페이지에서 가장 큰 역할을 한다
하지만 너무 많이 사용하면 웹 페이지의 성능이 저하될 수 있기 때문에
미디어 쿼리를 최소화하는 방법을 정리하고자 한다.
1. 불필요한 미디어 쿼리 삭제
사용되지 않는 미디어 쿼리는 삭제하는 것이 좋다.
ex) 모바일 장치에서는 적용되지 않는 데스크톱용 미디어 쿼리를 삭제
2. flex, grid 사용
플렉스와 그리드를 사용하면 뷰포트의 너비에 따라
자동으로 레이아웃을 조정할 수 있어서 미디어 쿼리를 줄일 수 있다.
See the Pen flex by 이아름 (@aahreum) on CodePen.
3. CSS 가변단위 사용
CSS 가변단위인 rem, em, vw, vh를 사용해서 미디어 쿼리를 최소화할 수 있다.
h1 {
font-size: 1.5em;
font-size: calc(1.5em + 0.5vw);
}뷰포트의 너비에 따라 폰트 크기가 조정되어서 미디어 쿼리를 사용하지 않아도 된다.
728x90
