수직 미디어 쿼리가 작동하지 않습니다.

내 화면 해상도는 1240x768이지만 내 브라우저에서 감지하는 유일한 미디어 쿼리는 최소 높이를 300px로 설정했을 때 300px보다 큰 값으로 설정하면 쿼리가 효과가없는 것 같습니다. 브라우저 창 높이가 768px이기 때문에 이는 의미가 없습니다.수직 미디어 쿼리가 작동하지 않습니다.

@media only screen and (min-height:300px) { 
    .wanderfest #map-1-container { 
    height: 768px; 
    overflow: hidden !important; 
    position: relative; 
    width : 1560px; 
} 

.map-viewport { 
    border: 1px solid black; 
    /*height: 1170px;*/ 
    margin: 0 0 20px; 
    overflow: hidden; 
    position: relative; 
    /*width: 1350px;*/ 
    height : 768px; 
    width : 1560px; 
} 


/*map size*/ 
#map-1 { 
    cursor: move; 
    width: 2146px; 
    height: 1170px; 
    position: absolute; 
    left: -275px; 
    /*top: -33px;*/ 
} 
    }

당신은 미디어 쿼리는 당신이 듣고 싶지 않아 확신 맨 아래

출처

2013-01-22 Alex Borsody

에 여기 http://www.wanderfest.com 사이트를 볼 수 있습니다,하지만 당신은 확실히 <head>까지를 청소해야합니다. 거기에는 너무 많은 CSS와 자바 스크립트 링크가 있습니다.

나는 이것을 개발 환경으로 옮기겠다. 우리는 선택할 수있는 28 가지 스타일 시트가있을 때 미디어 쿼리를 찾기가 쉽지 않지만 빠르게 진행할 것이다.

여기에 당신이 수직 미디어 쿼리를 이해하게 희망 예입니다 : http://codepen.io/justincavery/live/qLJjt

내가이 :after 의사 요소를 통해 미디어 쿼리의 가치를 인쇄하고 있어요.

.container { 
    width: 600px; 
    height: 300px; 
    margin: 5em auto; 
    background: #cc4e46; 
    padding: 3em; 
    color: #333; 
} 

.container:after { 
     font-size: 2em; 

} 
@media (max-height:300px) { 

    .container:after { 
    content: "max-height:300px"; 

    } 

} 

@media (min-height:300px) { 

    .container:after { 
    content: "min-height:300px" ; 
    } 

} 

@media (min-height:400px) and (max-height:600px){ 

    .container:after { 
    content: "(min-height:400px) and (max-height:600px)" 
    } 

} 

@media (min-height:600px){ 

    .container:after { 
    content: "(min-height:600px)" 
    } 

}

브라우저의 높이를 조정하여 해고중인 미디어 쿼리를 확인할 수 있습니다. 브라우저 높이가 300px 이상이면 미디어 쿼리가 실행되어야합니다. 죄송합니다 더 도움이 될 수 없지만, 아마도 이것이 발생해야하는 페이지를 링크하면 쿼리를 포함하고있는 CSS 파일에서 더 자세히 살펴볼 수 있습니다 (CSS 선언을위한 소스를 확인한 언급 된 요소 중 하나를 찾으십시오).

출처

2013-01-22 06:45:19 justinavery

수직 미디어 쿼리가 작동하지 않습니다.

답변

관련 문제