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

Posted 2023-03-06

【中文标题】@media min 和 max 两者或只有一个

【英文标题】：@media min and max both or just one

【发布时间】：2017-08-05 12:02:50

【问题描述】：

例如，同时使用两者

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

或者只是

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

什么更有效？我想要浏览器性能！

在第二种情况下，如果宽度小于 768px，浏览器会应用 style 两次，直到得到正确的？

【问题讨论】：

对我来说它们是一样的，只是第二个会比第一个小

【参考方案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)
 .navmax-width:900px;

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