미디어 쿼리를 가져올 수 없습니다.

Question

미디어 쿼리를 사용하여 화면 크기에 반응하는 레이아웃을 만들려고합니다. 나는 그 순간에 그것을 테스트하고있는 중이며, 나는 삶의 방식이 작동 할 수있는 방법이 없다. 화면이 480 픽셀 이하로 내려 갔을 때 내 링크의 배경색을 빨간색으로 변경해야하는 미디어 쿼리를 설정했지만 화면을 축소하면 작동하지 않습니다.

당신은 어떤 도움을 주시면 감사하겠습니다 http://www.noellesnotes.com

에서 행동에서 볼 수 있습니다. 해야하는 폭 최대로

.site-navigation a{ 
    width: 125px; 
    float: left; 
    padding: 50px 0 50px 0; 
    letter-spacing: 4px; 
    text-transform: uppercase; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
    color: rgb(82,82,82); 
} 

.site-navigation a:hover{ 
    font-weight: bold; 
    background-color: rgb(242,168,134); 
    color: rgb(255,255,255); 
    text-shadow: rgb(200, 200, 200) 1px 1px 0px; 
} 

@media only screen and (max-device-width: 480px) { 
    .site-navigation a{ 
     background-color: red; 
     } 
    } 

Answer 1

변경하여 최대-장치 폭

@media only screen and (max-width:480px){ 
    .site-navigation a { 
     background-color: red; 
    } 
} 

:

HTML :

<div class="site-navigation"> 
    <a href="#">About</a> 
    <a href="#">Work</a> 
    <div class="site-title">Noelle Devoe</div> 
    <a href="#">Blog</a> 
    <a href="#">Contact</a> 
</div> 

CSS 여기

는와 관계있는 코드입니다 너를 위해 속임수를 써라. 또한 큰 페이지는 다음과 같이 the media queries page on MDN

Answer 2

USE IT가에있다 볼 수 있습니다 :

이

@media only screen and (max-width: 480px){ 


} 

이 좋은이 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/