html - CSS 媒体查询不能在移动设备上运行，但可以在桌面上运行

Question

关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。












想改进这个问题？将问题更新为 on-topic对于堆栈溢出。

去年关闭。




Improve this question




我在我的 HTML 中添加了元标记

<meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0," />

我的媒体查询顺序正确，位于样式表的末尾。 (桌面版有效)

@media only screen and (max-width: 600px) {
/* my refactoring code */
}

桌面版是这样的>
Desktop version
手机版是这样的>
Mobile Version
请帮助我获得适用于移动设备的代码。谢谢!

Answer 1

确保您用于测试移动版本的设备 <= 600px。
您可以尝试仅使用 @media :

@media ( max-width:600px ) {
 /* CSS rules here */
}

或者也许使用 em 而不是像素:

@media only screen and (max-width:37.5em) { 
    /* CSS rules here */
}

根据您在评论中的反馈，我为您写了一个片段:

div {
  height: 150px;
  width: 150px;
}

.myDiv {
  background-color: red;
  /* Other Desktop CSS Rules */
}

@media only screen and ( max-width: 600px) {
  .myDiv {
    background-color: green;
    /* Other Small Devices CSS Rules */
  }
}

<div class='myDiv'>
  That's an amazing div.
</div>