CSS3 미디어 쿼리 문제

Question

1024px 이상의 화면 크기에서도 500px과 1024px 사이의 화면 만 설정했다는 규칙이 적용됩니다.

다음은 CSS입니다. .red 스타일은 480px보다 작은 화면에 올바르게 적용됩니다. max-width 이상의 모든 화면에 노란색이 적용된 것입니다. 1024px입니다.

.buy { 
    border: 1px solid #ABABAB; 
    color: #333333; 
    display: block; 
    font-family: calibri,helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    height: 25px; 
    line-height: 25px; 
    margin: auto; 
    text-align: center; 
    text-decoration: none; 
    width: 70px; 
} 

@media only screen and (max-width: 480px) { 
    .buy { 
     color: red; 
    } 
} 

@media screen and (max-width: 1024px) and (min-width: 500px) { 
    .buy { 
     color: yellow; 
    } 
} 

Answer 1

당신은 only

@media only screen and (min-width: 500px) and (max-width: 1024px) { 
    .buy { 
    color: yellow; 
    } 
} 

를 잊어 버렸습니다