@media (max-width: 1024px) {
width: 768px;
}
@media (max-width: 768px) {
width: 100%;
}이런식으로 미디어쿼리를 잡곤한다.
일단 max는 최대값의 개념이다.
괄호안이 조건이 되는데, 최대가 1024다?
별로 와닿지가 않는다.
어쩌라는 말인가.
부등호로 생각하면 쉽다.
당연히 맥스는 큰넘이니까. 크기의 변수를 a라고 생각하면
a < 맥스
이렇게 생각하면 된다.
즉, 1024px보다 작으면 이거해라. 이런말이다.
거꾸로 min은 작은넘이니까.
min < a
이렇게 생각하면 된다.
저기선 a < 1024이면 저걸 적용하라고 미리 선언한후에
마치 덮어쓰기 처럼, 추가조건으로
a < 1024면 전부다 이조건으로 스타일이 적용되는데
그와중에 특히 a < 768이면 이걸로 적용해라. 이렇게 되는 것이다.
큰 도화지를 먼저칠하고, 작은 부분은 다시 칠하는 느낌이다.
그러면 당연히 작은 부분은 무조건 작은 부분에 설정된대로 반드시 작동하고
큰 부분은 공통으로 처리된다.
min, max를 섞어서
@media (min-width:768px) and (max-width:1024px) 이렇게 처리하면
768px < 창크기 < 1024px 에 대한 스타일을 지정할 수 있다.