내 미디어 쿼리가 특히 제대로 작동하지 않습니다.

Question

하나의 헤더에 대해 미디어 쿼리를 작업하고 있지만 미디어 쿼리가 작동하지 않습니다. 하나의 장치에 대한 미디어 쿼리를 올바르게 수정하면 장치에서 작동하지 않습니다. 여기 ... 내 코드입니다

@media (max-width: 499px) { 
    .mission h1 { 
     font-size: 10px; 
     margin-right: 550px; 
     margin-top: -15px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 10px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 6px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 5px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (min-width: 610px) { 
    .mission h1 { 
     font-size: 16px; 
     margin-right: 550px; 
     margin-top: -15px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 16px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 10px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 7.5px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (min-width: 700px) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (min-width: 700px) and (orientation: landscape) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media tv and (min-width: 700px) and (orientation: landscape) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: 50px; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 
@media (max-width: 860px) { 
    .mission h1 { 
     font-size: 18px; 
     margin-right: 550px; 
     margin-top: -20px; 
     ; 
     margin-bottom: 0px; 
    } 
    .mission h2 { 
     font-size: 16px; 
     margin-right: 550px; 
     margin-bottom: 0px; 
    } 
    #p1 { 
     font-size: 12px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
    #p2 { 
     font-size: 8px; 
     margin-right: 540px; 
     line-height: 10px; 
    } 
} 

내가 원하는 정확히 응답하지 않기 때문에 나는 내 문제를 좀 해결하려고 위의 코드. 내 웹 사이트가 생방송이며 링크를 사용하여 온라인으로 해지 할 수 있습니다. http://www.ericsbo.se/ 나는 보통이 웹 사이트 웹 사이트의 응답성에 대해 내 웹 사이트를 확인합니다. 하나라도 확인하면 버그를 찾을 수 있습니다. 온라인 검사 웹 사이트는 http://www.isresponsive.com/

Answer 1

좋아 여기에서 찾을 수있다, 그래서 나는 몇 가지 테스트를 수행하고 내가 을 알고 왜에서 [폭] 이하의 경우는 "최대 폭 의미하기 때문에 그 일을한다 ~ [max-width]는 true를 반환합니다.

이 알고있는 우리는이 같은 쿼리 읽어 is 300px <= 800px (returns true)

is 300px <= 499px (returns true)

그래서이 경우에 모두 해당 반환을 나는 후자의 코드가 더 우선합니다 번복 할 CSS 믿고 이전 코드 그래서, 당신이 전환하고 최소 폭을 수행 할 수 있습니다, 세트 경계 (I는 의견에 무엇을 제안) 또는min-width:800px 논리적 문이 해야 작업 후 min-width:499px 논리적 문 를 넣으면 저는 믿습니다.

편집 : 가로 모드의 경우, 내가 생각할 수있는 가장 좋은 방법은 내가 생각한 최선의 방법이라고 생각합니다. 가로 모드 and not (orientation: landscape)이므로 트리거되지 않습니다. 아마도 더 좋은 방법 일지 모르지만 약간의 연구를해야합니다. 다음은 좋은 정보가 담긴 멋진 페이지입니다. CSS Tricks

Answer 2

나는 몇 가지 연구를 수행했으며 거의 ​​모든 미디어 장치를 다루는 가장 정확한 미디어 쿼리가 다음과 같이 결론 내렸다.

@media only screen and (min-width: 150px) and (max-width: 600px) { 
/****** @Style ******/ 
{ 

@media only screen and (min-width: 761px) and (max-width: 1200px) { 
    /****** @Style ******/ 
}