14

我的移动版本（最大宽度：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;
  }
}
4

7 回答 7

48

在文档的开头，确保您有

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

如果您忽略它，那么许多设备将缩放页面以适应视口。

于 2013-04-02T15:40:56.220 回答
4

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

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
于 2013-04-03T09:09:55.063 回答
0

也许你可以通过使用指定

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

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

于 2013-04-02T14:00:37.770 回答
0

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

一些移动设备也会响应@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*/
于 2013-04-02T14:18:49.677 回答
0

签到标签

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
于 2018-01-17T07:42:50.080 回答
0

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

于 2021-02-04T21:15:56.963 回答
-1

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

于 2013-04-02T14:22:07.430 回答