CSS 미디어 쿼리 너비 규칙이 적용되지 않습니다.

Question

화면 크기가 800px 미만으로 줄어들면 머리글의 내용을 가운데 맞춤하려고합니다.

그래서 CSS 미디어 쿼리를 정의했지만 제대로 작동하지 않습니다.

http://jsfiddle.net/QGyXe/3/

참고 : 나는 많은 코드가 알고 있지만, 어떻게이 일어나는 div#head_frame와 어린이, div#logo_container 및 div#main_buttons_container

을 조정하기 위해 노력하고있어 아래에있는 내 코드와 바이올린입니다 화면 크기를 줄이면 Chrome 개발자 창에서 새 규칙이 표시되지만 규칙이 겹쳐져 비활성화된다는 의미입니다. 나는 이유를 모른다. 여기 screencap입니다 :

나는 간단한 DOM과 오류를 재현하려고하지만 일 :

http://jsfiddle.net/a3yKk/1/

하지만 내가 노력하고있어 보여주기 위해 여기를 걸었습니다 이루다.

도움 주셔서 감사합니다.

Answer 1

미디어 쿼리의 선택기가 글로벌 CSS의 div#main_buttons_container 선택기보다 정확하지 않으므로 덮어 쓰게됩니다. CSS를 다음으로 변경하십시오 :

@media screen and (max-width: 800px) { 
    div#main_buttons_container { 
    width: 100%; 
    } 
}