@media only screen and (max-width: 479px) 不适用于移动设备

Question

我的移动版本 (max-width : 479px) 没有显示 #111 的背景颜色。 相反，#000 显示为背景颜色。 请帮我。

@media only screen and (max-width: 1024px) {
 body{
   background-color:#ff0000;
  }
}

@media only screen and (max-width: 767px)
{
 body{
   background-color:#000;
  }
}

@media only screen and (max-width: 479px)
{
 body{
   background-color:#111;
  }
}

Answer 1

在你的文件的头部，确保你有

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

如果您省略此项，则许多设备将缩放页面以适应视口。

祝你好运

Answer 2

您是否指定了视口元标记？ 我也建议将 479 更改为 480。

这是一个视口元标记的示例 - 这是我在自己的响应式网站上使用的标记。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Answer 3

也许你可以通过使用来指定

@media only screen and (min-width:768px) and (max-width: 1024px) {}

因为如果屏幕的宽度为 200 像素，它将符合所有其他规则，它不会超过其宽度

祝你有美好的一天

Answer 4

尝试使用设备宽度而不仅仅是屏幕尺寸。 许多移动/平板设备将在概览中打开页面，因此屏幕尺寸将被忽略。

还有一些移动设备会响应@media handheld选择器。

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
/*Ipad*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px)
/* Smartphones (portrait and landscape)*/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5)
/*Iphone 4*/
@media only screen and (min-device-pixel-ratio : 1.5)
/*Iphone 4*/

@media handheld and (max-width: 960px)
/*handheld*/

Answer 5

签入标签

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

Answer 6

我遇到了同样的问题，但是将 @media (max-width: 400px) 更改为 @media (max-device-width: 400px) 对我有用，希望对您有所帮助

Answer 7

为什么不使用 Twitter Bootstrap？ http://twitter.github.com/bootstrap/