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

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) {

}