html - Css3 设备宽度和方向改变

Question

我希望在改变方向时改变背景颜色。我有以下代码:

<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; } }

不幸的是，这不起作用。但是当我将 max-device-width 和 min-device-width 更改为 max-width 和 min-width 它有效。 为什么带有 max-device-width 和 min-device-width 的代码不起作用？

Answer 1

这应该有效:

将此添加到您的 HTML 页面:

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

在您的 CSS 代码中，您必须添加:

div {
  background-color: blue;
}

@media (max-width: 360px) {

  div{
    background-color: green;
  }
}

所以当窗口宽度小于 360 像素时，背景颜色将变为绿色，否则为蓝色。