[CSS] 미디어쿼리 새로운 문법

기존 미디어쿼리 범위 지정 방법은 min-width, max-width 를 사용했었는데, 주요 문제점으로는 직관성이 떨어지고 아래와 같이 '같거나 작다'로 통용되기 때문에 '무조건 작다'를 표현하려면 원하는 숫자보다 작은 수를 사용하는 수 밖에 없었습니다.

/* width <= 1024px */
@media (max-width: 1024px) { 
    ...
}

/* width < 1024px */
@media (max-width: 1023.99px) { 
    ...
}

/* 768px <= width <= 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
    ...
}

새로 추가된 미디어쿼리 범위 지정 방법은 javascript 처럼 부등호를 이용한 방식으로 기존 방법보다 직관적이고 단순합니다.

/* width <= 1024px */
@media (width <= 1024px) { 
    ...
}

/* width < 1024px */
@media (width < 1024px) { 
    ...
}

/* 768px <= width <= 1024px */
@media (768px <= width <= 1024px) {
    ...
}

 

해당 포스팅은 이 글을 참고하여 작성했습니다.