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屏幕而不是@media屏幕，并且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) {
    ...
}

css解决媒体查询 - 单页网站

1 个答案:

css解决媒体查询 - **单页网站**

1 个答案:

css解决媒体查询 - 单页网站