媒体查询和响应式设计它是如何工作的

Question

任何人都可以告诉我为什么会这样做

/* small desktop */
@media all and (max-width: 1200px) {

}

/* tablet */
@media all and (max-width: 1024px) {

}

/* mobile phone */
@media all and (max-width: 768px) {

}

但这不是：

/* mobile phone */
@media all and (max-width: 768px) {

}

/* tablet */
@media all and (max-width: 1024px) {

}

/* small desktop */
@media all and (max-width: 1200px) {

}

因为上一个样式总是覆盖以前的样式，如：

[class=foo]{
    background:red;
    background:yellow;
  }

输出：

.foo background yellow

Answer 1

简单地说：样式表级联，所以如果条件为真，它将覆盖任何先前的。您的第二个示例是移动优先方法，因此您需要使用min-width。

/* mobile phone */
@media all and (min-width: 768px) {

}

/* tablet */
@media all and (min-width: 1024px) {

}

/* small desktop */
@media all and (min-width: 1200px) {

}