[css] CSS에서 미디어 쿼리의 순서가 중요한 이유는 무엇입니까?

Program / 글쓴이

최근에 저는 더 반응이 빠른 사이트를 디자인하고 있으며 CSS 미디어 쿼리를 자주 사용하고 있습니다. 내가 알아 차린 한 가지 패턴은 미디어 쿼리가 정의되는 순서가 실제로 중요하다는 것입니다. 모든 브라우저에서 테스트하지는 않았지만 Chrome에서만 테스트했습니다. 이 동작에 대한 설명이 있습니까? 사이트가 제대로 작동하지 않고 쿼리인지 또는 쿼리가 작성된 순서인지 확실하지 않을 때 때때로 실망스러워집니다.

예를 들면 다음과 같습니다.

HTML

<body>
    <div class="one"><h1>Welcome to my website</h1></div>
    <div class="two"><a href="#">Contact us</a></div>
</body>

CSS :

body{
font-size:1em; /* 16px */
}

.two{margin-top:2em;}



/* Media Queries */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}

}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
            }
/*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}

그러나 마지막에 1024×600에 대한 쿼리를 작성하면 브라우저가이를 무시하고 CSS 시작 부분에 지정된 여백 값 (margin-top : 2em)을 적용합니다. 

/* Media Queries - Re-arranged version */

@media (max-width: 480px) {
    .body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
       .two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
       .two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
       .two{margin-top:7em;}
}
 /*1024x600*/
@media (max-height: 600px) {
       .two{margin-top:4em;}
}

미디어 쿼리에 대한 나의 이해가 정확하다면 순서는 중요하지 않지만 그렇게하는 것 같습니다. 이유가 무엇일까요?

답변

CSS-Cascading Style Sheet의 디자인입니다.

즉, 동일한 요소에 충돌하는 두 개의 규칙을 적용하면 첫 번째 규칙에 !important마커가 있거나 더 구체적 이지 않는 한 선언 된 마지막 규칙이 선택됩니다 (예 : html > bodyvs just body, 후자는 덜 구체적 임).

따라서이 CSS가 주어지면

@media (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

브라우저 창 너비가 350 픽셀이면 배경은 파란색이되고이 CSS를 사용하면

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

창 너비가 같으면 배경이 빨간색이됩니다. 두 규칙 모두 실제로 일치하지만 두 번째 규칙은 마지막 규칙이기 때문에 적용되는 규칙입니다.

마지막으로

@media (max-width: 400px) {
  body {
    background: blue !important;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

또는

@media (max-width: 400px) {
  html > body {
    background: blue;
  }
}

@media (max-width: 600px) {
  body {
    background: red;
  }
}

배경은 파란색 (350 픽셀 너비의 창)이됩니다.

답변

또는 더 큰 미디어 쿼리에 최소 너비를 추가하고 순서에 관계없이 문제가 없을 수 있습니다.

@media (min-width: 400.1px) and (max-width: 600px) {
  body {
    background: red;
  }
}

@media (max-width: 400px) {
  body {
    background: blue;
  }
}

스 니펫 확장

이 코드를 어떤 순서로든 사용하면 배경색은 너비가 400.1px-600px 인 해상도의 경우 항상 빨간색이되고 너비가 400px 이하인 해상도의 경우 항상 파란색이됩니다.

답변