CSS : 복수 미디어 쿼리 적용

Question

두 개의 .css 파일이 있습니다. 하나는 데스크톱 용이고 다른 하나는 (대부분의) 모바일 장치 용 파일입니다. 그러나 CSS 코드는 여러 개의 @media 조건에 적용되며 모든 기기에서 작동하도록 할 수는 없습니다.

@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px){ 
    /* HTC One styling */ 
} 

경우 : 나는 HTC 하나에 같은 스타일을 적용 할 경우

@media only screen and (min-device-width : 360px) and (max-device-width : 480px){ 
    /* iPhone styling */ 
} 

, 내가 사용할 필요 : 예를 들어

은 아이폰의 @media 쿼리는 뭔가처럼 보인다 나는 두 개의 동일한 .css 파일을 가지고 있습니다 - 첫 번째 조건과 두 번째 조건이있는 웹 사이트 - 두 장치에서 원하는 방식으로 웹 사이트를 정확하게 표시합니다. 그러나 변경시 여러 파일을 편집해야합니다. 내가 그렇게 같은 조건을 결합하는 시도

:

@media only screen and (min-device-width : 360px) and (max-device-width : 480px), 
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) { 
    /* Generic mobile device styling */ 
} 

하지만 HTC와 아이폰 모두에서 테스트 할 때, 단지 아이폰이 내 원하는 스타일로 나타납니다.

동일한 .css 스타일을 여러 개의 @media 조건에 적용하려면 어떻게해야합니까?

Answer 1

this 설명서에 따르면, 코마 후 @media을 반복해서는 안됩니다. 다음 코드가 작동해야합니다.

@media only screen and (min-device-width : 360px) and (max-device-width : 480px), 
only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) { 
    /* Generic mobile device styling */ 
}