미디어 쿼리가 작동하지 않는 것 같음

왜 이것이 작동하지 않는지 잘 모름. 어떤 아이디어?미디어 쿼리가 작동하지 않는 것 같음

화면이 700px 미만이되면 배경색이 변경되지 않고 HeaderImg이 계속 표시됩니다.

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <style> 
    #content { 
     text-align:center; 
     width:100%; 
     margin:0; 
     padding:0; 
    } 

    img{ 
     height:auto; 
     width: 100%; 
    } 

    @media only screen and (max-width: 700px) { 
     #content{ 
      background-color:#000; 
     } 
     #HeaderImg{ 
      display:none; 
     } 
    } 
    @media only screen and (max-width: 1920px) { 
     #HeaderImg{ 
      display:inline; 
     } 
    } 
    </style> 
    </head> 
    <div id="content"> 
     <img id="HeaderImg" src="LargeBanner_1920x300.png" width="600px" height="300px;" /> 
    </div>

출처

2014-12-01 Avien

당신이하십시오 "작동하지 않는"설명 할 수있다. –

"작동하지 않는다"는 것은 무엇을 의미합니까? 예상되는 행동은 무엇이며 무엇을보고 있습니까? 문제를 설명하기 위해 코드 스 니펫이나 바이올린을 만들 수 있습니까? 830+ 포인트로 나는 이것이 많이 요구하지 않는다고 생각합니다 - 당신은 잘 알고 있어야합니다. – Terry

Terry에게 감사드립니다. 당신의 현명한 말을 고려할 것입니다. – Avien

두 번째 스타일이 첫 번째 스타일보다 우선합니다. 결국 700px 미만도 1920px 미만입니다. 두 개의 선언을 바꾸거나 두 번째 선언을위한 최소 너비를 지정하십시오.

@media only screen and (min-width: 701px) and (max-width: 1920px) { 
    #HeaderImg{ 
     display:inline; 
    } 
}

최소 너비를 지정하도록 선택했습니다. 그렇게하면 의도가 무엇인지 명확하게 알 수 있으며 실제로 실수로 701px에서 1920px 상황에만 해당하는 < = 700px 상황에 속성을 적용 할 위험이 없습니다.

그래도 색상이 변경되어야합니다. 다른 문제는 이미지가 숨겨지면 포함 된 div (#content)가 접히는 것이므로 볼 수는 있지만 볼 수는 없습니다. 높이가 없으므로 더 이상 볼 수 없습니다. 따라서 검은 색 막대를 표시하려면 명시적인 높이를 지정하거나 일종의 내용을 지정해야합니다. 이미지의 공간을 차지하게하려면 display 대신 visibility 스타일을 사용하여 이미지를 숨 깁니다. 공개 설정은 문서에서 차지하는 공간을 그대로 유지하면서 이미지를 표시하거나 숨기므로 이미지는 여전히 #content를 늘립니다.

A가 아래로 옷을 입고, 당신의 조각의 수정 된 버전이 보여줍니다

#content { 
 
    text-align:center; 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    /* Just for demo */ 
 
    color: red; 
 
} 
 

 
img{ 
 
    height:auto; 
 
    width: 100%; 
 
} 
 

 
@media only screen and (max-width: 700px) { 
 
    #content{ 
 
    background-color:#000; 
 
    } 
 
    #HeaderImg{ 
 
    visibility: hidden; 
 
    } 
 
} 
 
@media only screen and (min-width: 701px) and (max-width: 1920px) { 
 
    #HeaderImg{ 
 
    visibility: visible; 
 
    } 
 
}

<div id="content"> 
 
    <img id="HeaderImg" src="LargeBanner_1920x300.png" width="600px" height="300px;" alt="Test replacement for missing image"> 
 
</div>

출처

2014-12-01 19:21:51 GolezTrol

프로그래머가 무엇을 가지고 있는지 명확하게하기 때문에 최소 너비를 추가하는 것이이 문제를 해결하는 확실한 방법이 될 것입니다. 우연히 있다. CSS 파일은 때때로 엉망이 될 수 있습니다. – charles

@charles 전적으로 동의합니다. 나는 그 글을 쓰고 있다고 생각했지만 분명히 잊어 버렸기 때문에 나는 그것에 대해 한 줄을 더했습니다. 감사. – GolezTrol

미디어 쿼리가 작동하지 않는 것 같음

답변

관련 문제