css resolutions media queries - **单页网站**

Question

真的很难做到这一点。希望有人能帮我解决这个问题。

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

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

我的代码如下。我在每个标题中标记了不同的颜色，这样我就可以看到正在使用哪个代码。本质上，我应该能够拖动我的视口(viewport)，以便能够将标题的颜色更改为全部 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)
}

结果:无论我将视口(viewport)拖动到什么大小，我的标题更改的唯一颜色是浅绿色、绿色和黑色(以及黑色和绿色之间的幻影区域，其中没有使用代码)。

我尝试将代码更改为 @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) {
    ...
}