CSS의 미디어쿼리의 max-width와 min-width

자주 헷갈리기 때문에 적어둔다.

max-width는 ~까지라는 의미로 해석하면 되고

min-width는 ~부터라는 의미로 해석하면 쉽다

max-width

( to )

~420px까지 배경이 파란색

@media (min-width:420px){
	div{
    	background-color:blue;
    }
}

min-width

( from )

420px~ 이상은 배경이 파란색

@media (min-width:420px){
	div{
    	background-color:blue;
    }
}

추가 ( 2024/04/09 )

예외적인 사항으로 아래와 같은 tailwindcss의 미디어타입이 있다

이 경우는 어떻게 해석될까?

1. 가장 처음 위의 not에 주목한다

not은 all과 (min-width: 768px)라는 조건을 부정한다 라는 의미로 사용되었다

그러므로 모든 미디어 타입이 안되고 , width가 768px부터가 아닌 768px까지 라는 의미로 사용되게된다

2. 즉 위의 예문은 아래와 같은 해석이 된다

모든 미디어 타입에 적용하지 않고 width가 768px까지인 경우에만 적용한다 ( min-width가 사용되었지만 to의 의미로 사용되었음)