@media 최소 및 최대 모두 또는 한

Question

예를 들어, 사용 모두

@media (min-width: 768px) and (max-width: 992px){...} @media (max-width: 768px) {...}

이상 효율적 무엇 단지

@media (max-width: 992px) {...} @media (max-width: 768px) {...}

? 나는 브라우저 성능을 원한다!

두 번째 경우의 너비가 768px보다 작 으면 브라우저는 스타일을 올바른 것을 얻을 때까지 두 번 적용 할 것입니까? 이 방법 브라우저에서

Answer 1

사용이 하나의

@media (min-width: 768px) and (max-width: 992px){...} 
@media (min-width: 480px) and (max-width: 767px) {...} 

는 같은 CSS를 두 번 적용되지 당신은 쉽게 다른 장치의 크기가 서로 다른 속성을 CSS를 사용할 수 있습니다. 때때로 브라우저가 다른 장치 미디어 쿼리에서 CSS를 덮어 쓰지 않고 CSS에 !important을 사용합니다.

예 나를 위해 잘

@media (min-width: 768px) and (max-width: 992px){ 
.nav{max-width:900px;} 
} 
@media (min-width: 480px) and (max-width: 767px){ 
.nav{max-width:700px !important;} 
// only use important if browser not apply this property in this device size 
}