CSS 미디어 쿼리 중복에 대한 규칙은 무엇입니까?

CSS 미디어 쿼리 중복에 대한 규칙은 무엇입니까?

---

겹침을 피하기 위해 미디어 쿼리의 간격을 어떻게 정확하게 지정합니까?

예를 들어 코드를 고려하면 다음과 같습니다.

@media (max-width: 20em) {
    /* for narrow viewport */
}

@media (min-width: 20em) and (max-width: 45em) {
    /* slightly wider viewport */
}

@media (min-width: 45em) {
    /* everything else */
}

정확히 20em 및 45em에서 지원되는 모든 브라우저에서 어떤 일이 발생합니까?

나는 사람들이 799px와 800px와 같은 것을 사용하는 것을 보았지만 799.5px의 화면 너비는 어떻습니까? (분명히 일반 디스플레이가 아니라 레티 나 디스플레이?)

사양을 고려할 때 여기에 대한 답이 가장 궁금합니다.

---

CSS 미디어 쿼리 중복에 대한 규칙은 무엇입니까?

종속.

@media규칙은 캐스케이드에 투명하므로 두 개 이상의 @media규칙이 동시에 일치하는 경우 브라우저는 일치하는 모든 규칙에 스타일을 적용하고 그에 따라 캐스케이드를 해결해야합니다. ¹

정확히 20em 및 45em에서 지원되는 모든 브라우저에서 어떤 일이 발생합니까?

정확히 20em 너비에서 첫 번째 및 두 번째 미디어 쿼리가 모두 일치합니다. 브라우저는 @media규칙과 캐스케이드 모두에 스타일을 적용 하므로 재정의해야하는 충돌 규칙이있는 경우 마지막으로 선언 된 규칙이 우선합니다 (특정 선택자 !important등을 고려). 뷰포트의 너비가 정확히 45em 일 때 두 번째 및 세 번째 미디어 쿼리도 마찬가지입니다.

몇 가지 실제 스타일 규칙이 추가 된 예제 코드를 고려하십시오.

@media (max-width: 20em) {
    .sidebar { display: none; }
}

@media (min-width: 20em) and (max-width: 45em) {
    .sidebar { display: block; float: left; }
}

브라우저 뷰포트의 너비가 정확히 20em이면 이러한 미디어 쿼리는 모두 true를 반환합니다. 캐스케이드에 의해는 클래스가있는 모든 요소를 display: block재정의 display: none하고 float: left적용합니다 .sidebar.

미디어 쿼리가 시작되지 않은 것처럼 규칙을 적용하는 것으로 생각할 수 있습니다.

.sidebar { display: none; }
.sidebar { display: block; float: left; }

브라우저가 두 개 이상의 미디어 쿼리와 일치 할 때 캐스케이드가 어떻게 발생하는지에 대한 또 다른 예는 이 다른 답변 에서 찾을 수 있습니다 .

하지만 두 규칙 에서 겹치지 않는 선언이 있는 경우 @media해당 규칙이 모두 적용됩니다. 여기서 일어나는 일은 두 규칙 의 선언 이 결합 된 것 입니다. @media후자가 전자를 완전히 무시하는 것이 아니라 이전 질문으로 이어집니다.

겹침을 피하기 위해 미디어 쿼리의 간격을 어떻게 정확하게 지정합니까?

중복을 피하려면 상호 배타적 인 미디어 쿼리를 작성하기 만하면됩니다.

Remember that the min- and max- prefixes mean "minimum inclusive" and "maximum inclusive"; this means (min-width: 20em) and (max-width: 20em) will both match a viewport that is exactly 20em wide.

It looks like you already have an example, which brings us to your last question:

I've seen people use: things like 799px and then 800px, but what about a screen width of 799.5 px? (Obviously not on a regular display, but a retina one?)

This I'm not entirely sure; all pixel values in CSS are logical pixels, and I've been hard pressed to find a browser that would report a fractional pixel value for a viewport width. I've tried experimenting with some iframes but haven't been able to come up with anything.

From my experiments it would seem Safari on iOS rounds all fractional pixel values to ensure that either one of max-width: 799px and min-width: 800px will match, even if the viewport is really 799.5px (which apparently matches the former).

---

¹ _{Although none of this is explicitly stated in either the Conditional Rules module or the Cascade module (the latter of which is currently slated for a rewrite), the cascade is implied to take place normally, since the spec simply says to apply styles in any and all @media rules that match the browser or media.}

---

calc() can be use to work around this (min-width: 50em and max-width: calc(50em - 1px) will be correctly stacked), but poor browser support and i would not recommending it.

@media (min-width: 20em) and (max-width: calc(45em - 1px)) {
    /* slightly wider viewport */
}

Infos:

• https://developer.mozilla.org/en-US/docs/CSS/calc
• http://caniuse.com/calc
• http://www.w3.org/TR/css3-values/#calc

Some others mentioned, not using the em unit would help in your queries stacking.

---

I have tried as recommended here:

@media screen and (max-width: calc(48em - 1px)) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

but found that this was not a good idea because it does not work on Chrome right now either on my Ubuntu desktop or on my Android phone. (as explained here: calc() not working within media queries) But, I found a better way...

@media screen and (max-width: 47.9999em) {
    /*mobile styles*/
}
@media screen and (min-width: 48em) {
    /*desktop styles*/
}

and bam!

참고URL : https://stackoverflow.com/questions/13241531/what-are-the-rules-for-css-media-query-overlap