Question

我必须使用尺寸为304 * 250的图像。

完美的屏幕尺寸为320 * 480，屏幕尺寸为720 * 1280。

现在当我想在240 * 320的屏幕尺寸和480 * 800的屏幕尺寸中检查相同的内容时？ 既不会看到背景图像，也不会看到数据值。

采取补救措施：

我想过用一个方框而不是图像。我实现了它，并在320 * 480的屏幕尺寸上进行了测试。它非常完美。

我考虑使用媒体查询

在240 * 320的屏幕尺寸和480 * 800的屏幕尺寸上测试相同的内容

我从here提到并试图实施它，但我没有成功。

我的正常css

.container
{
    width:80%; height:auto; margin-left:10px; margin-right:10px; background-color:#CCCCCC; text-align:justify; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; min-height:250px;
}

我的媒体查询CSS

@media only screen and (max-device-width: 240px) 
{
    .container
    {
       width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
    }
}

我已按以下方式调用CSS

<link rel="stylesheet" type="text/css" href="css/common_set.css" />

问题： 它没有实现。我不能看到盒子。它只是一个空屏幕。

它不会访问上述媒体查询css。

解决方案

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

我的实施有误吗？请帮忙!!

澄清一下，如果我理解了答案的第一点

    .name_layer
    {
         float:left; width:100%; padding:0; margin:0; line-height:35px; height:35px; color: #FFFFFF; font-size:20px;
    }
    .name_layer_text
    {
        margin-left:1%;
    }
    .swipe_body
    {
          padding:0; margin:0; width:100%; height:480px; 
    }
    .container
    {
             width:200px; height:10px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; 
    }
    @media only screen and (max-width: 240px) 
    {
      .container
      {
            width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
      }
    }

这是对的吗？但我的输出是根据容器CSS ...我在不是浏览器的设备上测试它

修改：2

    @media only screen and (max-width:240px)  
    {
      .container
      {
            width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px;
      }
    }       
    @media only screen and (min-width:240px)
    {
         .container
        {
                 width:250px; height:250px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; top:5px min-height:200px;
        }
    }

它是一个较小的设备，并采用第二个CSS- 最小宽度：240px

Answer 1

这些是您的媒体查询无效的几种可能性。

当您使用媒体查询CSS时，您是否删除了普通的CSS？或者你两个都保持？如果你想同时拥有它们，那么你需要保持它们，否则正常的CSS会覆盖媒体查询中的一个。

例如，如果你的css是这样的......
```
@media only screen and (max-width: 241px) 
{
    .container
    {
         width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
    }
}

.container
{
     width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
}
```
媒体查询之外的.container样式将覆盖媒体查询中的样式。因此，如果存在特定于设备解析的样式，则必须将它们包装在媒体查询中。

与设备分辨率无关的样式，例如所有分辨率中相同的标题颜色，应该在媒体查询之外。
一个可能的问题是媒体查询与设备的分辨率不匹配。
另外，请检查您要查看的方向。
如果您在浏览器上进行测试，只有当您减小浏览器的宽度以满足媒体查询时，才会在媒体查询中看到样式。很重要！因为通过使用媒体查询，你只对宽度这么多的浏览器说。例如，要查看max-width 241px的媒体查询内部的更改，您需要将浏览器的宽度减小到240px以下（只需将浏览器的宽度减小到极小）

您可以尝试对分辨率为240 * 320的设备进行媒体查询。

我认为我找到了解决您需要从媒体查询中删除-device-的问题的解决方案（在浏览器上进行测试？）

@media only screen and (max-width: 241px) 
{
  .container
  {
   width:180px; height:150px; margin-left:10px; margin-right:10px; background-color:#CCCCCC; border-radius:20px; box-shadow: 10px 10px 5px #888888; padding:10px; ;
  }
}

您可以尝试对分辨率为480 * 800

@media only screen 
and (min-width : 480px) 
{
/* Styles */
}

注意：对媒体查询要非常谨慎。当你设置min和max时，它们将适用于满足min和max的所有分辨率。例如，上述媒体查询将适用于宽度大于480的所有设备。

如何使用Android版本2.2.1和2.3.5的Android设备的媒体查询，他们的屏幕尺寸为240 * 320，屏幕尺寸为480 * 800？

1 个答案: