추가 대괄호로 인해 간단한 미디어 쿼리가 실패합니다.

Question

저는 이상한 일이 생겨서 예상되는 동작인지 참으로 버그인지 궁금합니다.

내 의도는 다음 코드를 작성하는 것이지만 문제를 좁혀 냈습니다 (아래 참조).

@media only screen 
and (
    (-webkit-min-device-pixel-ratio: 1.2), /* or */ 
    (min-resolution: 120dpi) 
) { ... } 

이 코드는 작동합니다

@media only screen 
and ((-webkit-min-device-pixel-ratio: 1.2)) { ... } 

대상 플랫폼은 안드로이드 5.1에 대한 최신 크롬,하지만 내가 듣고 열려있어 : 별도의 외부 브라켓을 추가

@media only screen 
and (-webkit-min-device-pixel-ratio: 1.2) { ... } 

, 이것이 실패 다른 플랫폼에 대한 의견도 있습니다.

Answer 1

어떤 행동을 취해야하는지에 따라 다릅니다. 당신은 미디어 쿼리에 대한 규칙을 모두 적용 할 경우 그 규칙

을위한 and 또는 or이 필요하든, 당신은 당신이 규칙의 하나를 적용 할 경우 and 논리 연산자를

@media only screen and (-webkit-min-device-pixel-ratio: 1.2) 
        and (min-resolution: 120dpi) 
{ ... } 

를 사용할 필요가 미디어 쿼리, 당신은 쉼표를 사용해야합니다 :

@media only screen and (-webkit-min-device-pixel-ratio: 1.2), 
     only screen and (min-resolution: 120dpi) 
{ ... }