样式表中的 CSS 媒体查询层次结构

Question

在移动优先响应式设计中，媒体查询的层次结构是什么。 我将从较大的设备开始写到较小的设备，反之亦然。

max-width: 1024{}
max-width: 768{}
max-width: 320{}

or 
max-width: 320{}
max-width: 768{}
max-width: 1024{}

Answer 1

如果您优先使用移动设备，使用 min-width 并从最小到最大会更有意义。

即

没有媒体查询的一般规则(最小)

最小宽度:320{}

最小宽度:768{}

最小宽度:1024{}