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후자가 전자를 완전히 무시하는 것이 아니라 이전 질문으로 이어집니다.

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

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

기억 min-과 max-접두사가 "최소 포함"와 "최대 포함"을 의미한다; 즉 (min-width: 20em), (max-width: 20em)둘 다 정확히 20em 너비의 뷰포트와 일치합니다.

이미 예제가있는 것 같습니다. 마지막 질문으로 이어집니다.

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

이것은 완전히 확실하지 않습니다. CSS의 모든 픽셀 값은 논리적 픽셀이며 뷰포트 너비에 대해 분수 픽셀 값을보고하는 브라우저를 찾기가 힘들었습니다. 나는 일부 iframe을 실험 해 보았지만 아무것도 생각할 수 없었습니다.

내 실험에서 iOS의 Safari는 모든 분수 픽셀 값을 반올림 하여 뷰포트가 실제로 799.5px (분명히 이전과 일치 함) 인 경우에도 max-width: 799px및 중 하나 min-width: 800px가 일치 하는지 확인합니다 .

¹ _{조건부 규칙 모듈 이나 캐스케이드 모듈 (현재 재 작성 예정)에 명시 적으로 언급되어 있지는 않지만 캐스케이드가 정상적으로 발생하는 것을 의미합니다. 브라우저 또는 미디어와 일치하는 모든 규칙.@media}

여기에서 권장하는대로 시도했습니다.

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

하지만 우분투 데스크탑이나 안드로이드 폰에서 현재 크롬에서 작동하지 않기 때문에 이것이 좋은 생각이 아니라는 것을 알았습니다. (여기에 설명 된대로 : calc () not working within media query )하지만 더 나은 방법을 찾았습니다 ...

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

그리고 bam!

calc()이 문제를 해결하는 데 사용할 수 있지만 (min-width: 50em and max-width: calc(50em - 1px)올바르게 쌓일 수 있습니다.) 브라우저 지원이 좋지 않아 권장하지 않습니다.

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

정보 :

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

em단위를 사용하지 않는 다른 일부 언급 은 쿼리 스택에 도움이 될 것입니다.