CSS 파일의 미디어 쿼리가 전혀 작동하지 않습니다

Question

사이드 바 스냅을 헤더와 페이지 콘텐츠간에 놓 이도록 CSS 미디어 쿼리를 작성하는 방법 페이지 폭이 500 픽셀 미만으로 떨어지면이 변경이 발생하도록하고 싶습니다. 크롬 브라우저에서이 작업을 수행하고 있습니다.

내 HTML 파일의 본문을 살펴보십시오.

몸의 내용 나중에 자바 스크립트를 사용하여 채워집니다. 버튼이 만들어져 "buttonAttachPoint"에 첨부됩니다. 내용은 HTML 요소 문자열 형식으로되어 있으며 pageAttachPoint에 추가됩니다.

저는 현재 다음과 같은 CSS 코드를 사용하여 열의 수를 설정했습니다.

-webkit-column-count:3; 
-webkit-column-gap:20px; 
-webkit-column-rule:3px; 

다음 미디어 쿼리는 영향이하지 않는 것 : 어떤 도움을 주시면 감사하겠습니다

@media screen and (min-width: 500px) { 
body 
{ background-color: #0f0; 
-webkit-column-count:1; } 
} 

합니다.

Answer 1

나는 최대와 최소가 섞여 있다고 생각한다.

@media screen and (max-width: 500px){ 
    body { 
     background-color: #0f0; 
     -webkit-column-count:1; } 
    } 
} 

예 : http://jsfiddle.net/HnPSF/1/