Question

我添加了以下响应代码。但对于移动版本，其显示背景颜色＃000。它必须不显示背景颜色为＃111。请帮助

@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/

@media only屏幕和（max-width：479px）不适用于移动设备

7 个答案: