CSS3设备宽度和方向更改

Question

I'd like the background color to change while changing orientation. I have the following code:

<meta name="viewport" content="width=device-width">
...

@media all and (max-device-width: 360px) {
  div { background-color: green; } }      

@media all and (min-device-width: 361px) {
  div { background-color: blue; } }

Unfortunately this doesn't work. But when i change max-device-width and min-device-width to max-width and min-width it works. Why the code with max-device-width and min-device-width isn't working?

Answer 1

This should work:

Add this to your HTML Page:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And to your css code you have to add:

div {
  background-color: blue;
}

@media (max-width: 360px) {

  div{
    background-color: green;
  }
}

So when the window width is under 360 Pixel, the background-color will change to green, otherwise it will be blue.

Answer 2

Because it has to know that it is a device by displaying it. So it excludes all desktop visibility.

I would recommend not using this because not all device browsers send a recognition that the content is viewed on a device making it unpredictable when your design is applied.

Stick to min-width and height it is saver.