CSS 解析媒体查询 - **单页站点**

Question

这方面真的很难。希望有人能帮我解决这个问题。

目标：使用 CSS 调整我的屏幕元素，使我的网站在台式机和笔记本电脑的所有分辨率下都看起来不错。我需要同时包含宽度和高度，因为它是一个单页网站，仅适合视口（不向下滚动），并且元素需要适当地放置在屏幕上。

我正在使用 8“条”分辨率来尝试考虑用户可能将其窗口拖动到的所有视口分辨率。这是我绘制的视觉表示。请注意，这些部分的编号与 CSS 部分的编号相同：http://i1318.photobucket.com/albums/t654/thekevinbanas/pics%20yo/CSSresolutionswaths_zps41ee8742.jpg

我的代码如下。我将每个标题中的标题标记为不同的颜色，以便我可以看到正在使用的代码。基本上我应该能够拖动我的视口来将标题的颜色更改为全部 8 种，对吧？

/* 1 */
@media screen and (max-width:1024px) and (max-height:768px) {
  (green)
}

/* 2 */
@media screen and (min-width:1025px) and (max-width:1152px) and (min-height:769px) and (max-height:864px) {
  (white)
}

/* 3 */
@media screen and (min-width:1153px) and (max-width:1280px) and (max-height:800px) {
  (black)
}

/* 4 */
@media screen and (min-width:1153px) and (max-width:1280px) and (min-height:801px) and (max-height:960px) {
  (blue)
}

/* 5 */
@media screen and (max-width:1152px) and (min-height:865px) and (max-height:960px) {
  (yellow)
}

/* 6 */
@media screen and (min-height: 961px) and (max-width:1280px) {
  (orange)
}

/* 7 */
@media screen and (min-width:1281px) and (min-height:900px) {
  (gray)
}

/* 8 */
@media screen and (min-width:1281px) and (max-height:899px) {
  (aqua)
}

结果：无论我将视口拖动到何种大小，我的标题更改为的唯一颜色是浅绿色、绿色和黑色（以及黑色和绿色之间的幻影区域，没有使用任何代码）。

我尝试将代码更改为 @media only screen 而不是 @media screen，以及 min/max-device-width/height 而不是 min/max-width/height（对于所有 8 个部分）...但只有带有灰色标题的代码被使用。我没主意了。

有人可以解释发生了什么吗？以及如何修复我的代码来做我想做的事？

Answer 1

浏览器可能匹配多个声明。它将使用匹配的最后一个，因此更改顺序。从最小的开始。

//default
@media only screen {
    ...
}
//640 x 480
@media only screen and (max-width:640px) and (max-height:480px) {
    ...
}
//1024 x 768
@media only screen and (max-width:1024px) and (max-height:768px) {
    ...
}
//1152 x 864
@media only screen and (max-width:1152px) and (max-height:864px) {
    ...
}
//1152 x 960
@media only screen and (max-width:1152px) and (max-height:960px) {
    ...
}
//1280 x 800
@media only screen and (max-width:1280px) and (max-height:800px) {
    ...
}
//1280 x 960
@media only screen and (max-width:1280px) and (max-height:960px) {
    ...
}
//1280 x 960+
@media only screen and (max-width:1280px) and (min-height:961px) {
    ...
}
//1280+ x 899
@media only screen and (min-width:1281px) and (max-height:899px) {
    ...
}