모질라 미디어 쿼리 모바일보기

Question

안녕하세요. 내 사이트를 반응 적으로 만들려고합니다. 이제 특정 화면 크기의 장치를 처리하지만 웹을 통해 볼 때 다른 스타일링을 처리하는 미디어 쿼리가 있습니다. 크롬, 사파리, 오페라에서 잘 작동합니다. 그러나 mozilla에서 시도 할 때 데스크탑을 통해 액세스하는 동안 내 미디어 쿼리가 실행되고있는 것처럼 보입니다. 제가 누락 된 것이 있습니까? 아래는 내 미디어 검색어입니다

.my-target-class { 
    display: inline; 
} 

@media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (min-device-height: 300px) and (max-device-height: 750px){ 
     .my-target-class { 
      display: block; 
     } 
} 

제가 알 수 있듯이 휴대 전화를 통해 보는 경우 화면이 바뀌고 표시가 변경됩니다. 그러나 mozilla에서 @media 화면 쿼리를 실행하고 ng display : block을 클래스에 적용하면됩니다. 이것에 대한 아이디어 또는 수정? 왜 이런 행동을하는 이유에 대한 설명이라면 고맙겠습니다

스크린 샷의 오른쪽 하단에서 볼 수 있듯이 모바일 용 CSS 스타일을 적용하고 있습니다. 데스크톱 브라우저를 통해 액세스하고 있습니다. @media 만 화면에 배치하면 모바일에서 볼 때만 적용됩니다. 하지만 파이어 폭스가 다르게 행동하는 것 같습니다.

Answer 1

코드 외부에 두지 마십시오. 나는 것을 시도 @Highdef 당신이

@media screen and (min-device-width: 300px) and (max-device-width: 800px){ 
    .my-target-class { 
     display: block; 
    } 
} 
@media screen and (min-device-width: 801px) { 
    .my-target-class { 
     display: inline; 
    } 
}