최소 너비와 최대 너비의 미디어 쿼리를 혼합하는 데 문제가 있습니까?

Question

나는과 같이 두 분의 폭과 최대 폭 미디어 쿼리를 혼합하는 것을 시도하고있다 :

@media only screen and (max-width: 768px) { 
    .navibar li a { 
    font-size: 8px !important; 
    } 
} 

@media only screen and (max-width: 1300px) { 
    .navibar li a { 
    font-size: 2px !important; 
    } 
} 

@media only screen and (min-width: 1301px) { 
    .navibar li a { 
    font-size: 1rem !important; 
    } 
} 

2 픽셀하기 위해 1300px 글꼴 크기 변경 타격, 그러나 결코이 768px 미디어 쿼리 안타. 왜 이런거야?

Codepen

Answer 1

나는 왜 생각? max-width: 1300px이 2px 일 때 .navibar li a을 지정하십시오. 따라서 0 ~ 1300px 양식을 작성하면 해당 값은 2px입니다.
max-width: 768px 규칙 이후에 max-width: 1300px 규칙을 작성하므로 너비가 768px 미만인 경우에도 항상 2px가됩니다. 1300 이후에 max-width: 768px 규칙을 재배치해야하며 정상적으로 작동합니다.
그리고 부수적 인 점은 코드에 !important을 사용하지 마십시오. 나쁜 습관입니다. 규칙을 무시하는 다른 방법을 찾으십시오. !important은 인라인 스타일을 덮어 쓰는 데만 사용해야합니다. 그렇게하면 스타일을 쓰는 것이 좋지 않습니다.