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

Question

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

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

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

Answer 1

如果您首先使用移动设备，那么使用df$counter <- sequence(rle(paste0(df$dent, df$value))$lengths) df # dent value counter #1 1 0 1 #2 1 0 2 #3 1 1 1 #4 1 1 2 #5 1 1 3 #6 1 0 1 #7 1 1 1 #8 1 1 2 #9 2 1 1 #10 2 0 1 #11 2 0 2 #12 2 0 3 会更有意义，并且从最小到最大。

即

min-width

general rules with no media query (smallest)

min-width: 320{}

min-width: 768{}

Answer 2

就像这样

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