0

Really having a hard time with this. Hope someone sticks around to help me figure this out.

Goal: use CSS to adjust my on-screen elements to make my site look good on all resolutions for desktops and laptops. I need to include both width AND height, because it's a single-page site, meant to fit the viewport only (no scrolling down) and the elements need to be appropriately placed on the screen.

I'm using 8 "swaths" of resolutions to try to account for all viewport resolutions a user may drag their window to. Here is a visual representation I drew. Note that the sections are numbered to the same numbers as the CSS sections: http://i1318.photobucket.com/albums/t654/thekevinbanas/pics%20yo/CSSresolutionswaths_zps41ee8742.jpg

My code is as follows. I labeled a header in each of them a different color so I can see which code is being employed. Essentially I should be able to drag my viewport to be able to change the header's color to all 8, right?

/* 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)
}

Results: The only colors my header changes to, no matter what size I drag the viewport to are aqua, green, and black (as well as a phantom area between black and green, where no code is being employed).

I tried changing the code to @media only screen rather than @media screen, and min/max-device-width/height rather than min/max-width/height (for all 8 sections)...but then only the code with the gray header gets employed. I'm out of ideas.

Can someone explain what's going on? And how to fix my code to do what I want?

4

1 回答 1

1

The browser may be matching multiple declarations. It will use the last one it matches so change the order. Start with the smallest.

//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) {
    ...
}
于 2013-10-16T15:35:30.250 回答