Question

我希望我的@media适用于智能手机以及小型浏览器窗口。

因此，我想在下面的CSS代码段中使用第二个@media。

＆＃13;

@media only screen and (max-device-width: 37em) {
  .max-device-width {
    background: lightgreen;
  }
}

@media only screen and (max-width: 37em) {
  .max-width {
    background: lightgreen;
  }
}

＆＃13;

<div class="max-device-width">max-device-width</div>
<div class="max-width">max-width</div>

＆＃13;

对于手机而言应该没有区别，因为浏览器通常会填满整个屏幕。

为什么我的手机只接受第一个@media？

编辑：由于问题似乎含糊不清：我知道差异，但我无法理解为什么智能手机一旦接受其中一个就不接受@media。

Answer 1

max-width是显示区域的宽度（浏览器的宽度）

max-device-width是实际屏幕的最大宽度

Answer 2

随着 <meta name="viewport" content="initial-scale=1"> 在我的HTML中标记它有效，但我不知道为什么..

智能手机接受（max-device-width：x）但不接受（max-width：x）

2 个答案: