作为必须了解一些设计知识的程序员,我很高兴CSS grid最终吸引了我对设计应该是什么的认识:简洁和逻辑。

但是authoritative消息来源写道:

@media (min-width: 500px) { ... }
@media (min-width: 700px) { ... }


我会理解设置一个下限和一个上限

@media (min-width: 500px) { ... }
@media (max-width: 500px) { ... }


设计特征。

更好的是,由于开发人员有权(/必须)要学究,所以我会更满意

@media (min-width: 500px) { ... }
@media (max-width: 499px) { ... }


知道我们正在处理整数,而不是浮点数(但是无论如何,min等于>=还是>?)

我的争吵是第一次(最少500分钟;最少700分钟)。那怎么可能有意义?如果是的话又意味着什么呢?媒体查询的出现顺序重要吗?

最佳答案

如果宽度至少为500像素,则将应用第一个媒体查询中的规则。

如果宽度至少为700px,则应用第二个媒体查询中的规则。

由于不能不小于500也不能为700,因此如果第二个媒体查询中的规则适用,则第一个媒体查询中的规则也适用。

完全根据the cascade应用多个冲突规则,就像没有涉及媒体查询一样。


  媒体查询的出现顺序重要吗?


是的,按照级联:“最后,按指定的顺序排序:如果两个声明具有相同的权重,来源和特异性,则以后者为准。”



CSS的设计旨在使您可以构建样式,从通用样式到特定样式,都可以覆盖以前的规则。

提供默认规则,然后在窗口较大时分层附加规则,然后在窗口非常宽的情况下分层甚至更多,这是一种标准方法。

尝试针对不同的视口大小构建完全不同的样式表会导致重复,并使维护工作更加困难。

关于html - 媒体查询的两个下限意味着什么?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56891826/

10-12 12:52
查看更多