@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 
}