@media min和max两者或只是一个

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
}