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像素时，背景颜色将变为绿色，否则将变为蓝色。

Answer 2

因为它必须通过显示来知道它是一个设备。因此它排除了所有桌面可见性。

我建议不要使用此功能，因为并非所有设备浏览器都会发送识别内容在设备上查看，这使得在应用您的设计时无法预测。

坚持最小宽度和高度它是安全的。

Css3设备宽度和方向改变

2 个答案: