[CSS] 미디어쿼리 범위 지정해서 사용하기 media Query Range Syntax

미디어쿼리 범위 지정해서 사용하기

참고 사이트
https://css-tricks.com/the-new-css-media-query-range-syntax/

 

1. media Query Range  

최근에 단톡방에서 범위지정 css가 존재한다는 소식을 듣고 알아보았다.

기존에는 css 를 선택할때 불편하게 코드를 작성하곤 해서 범위지정이 되는게 있으면 좋겠다는 생각을 했었는데, 이렇게 나와있었다니 전혀 몰랐다. 아직 적용해보진 못했지만 퍼블할 일이 많으니 작업하면서 꾸준히 써보려고 한다.

@media (min-width: 400px) and (max-width: 1000px) {
  /* code */
}

이렇게 적용했던 불편했던 코드들이

@media (400px <= width <= 1000px) {
  /* code */
}

이런식으로 활용이 가능하다.🥹

 

 

 

 

2. media Query Range  브라우저 지원

브라우저 지원은 이렇게 되어있다.

현재 상황에서는 (IE 가 서비스를 중지한 상태)

어느 브라우저든 사용이 가능하다 

https://css-tricks.com/the-new-css-media-query-range-syntax/

 

 

 

3. media Query Range 적용예시

이런식으로 연산자 구문을 사용하듯이 적용이 가능하다

@media screen and (width >= 768px) {
  header {
    justify-content: space-between;
  }
}