如何在 Android 版本为 2.2.1 和 2.3.5、屏幕尺寸为 240320 和 480800 的设备上使用媒体查询？

Question

如何在 Android 版本为 2.2.1 和 2.3.5、屏幕尺寸为 240320 和 480800 的设备上使用媒体查询？

androidhtmlcsscordovamedia-queries

3

我需要使用一张尺寸为304*250的图片。

在屏幕大小为320*480和720*1280时，它能够完美地工作。

但是当我想在屏幕大小为240*320和480*800上查看时，既没有背景图片也没有数据值。

解决步骤：

我考虑使用盒子阴影代替图片。我实施了它并在屏幕大小为320*480上进行了测试，效果很好。

我想在屏幕大小为240*320和480*800上测试相同的内容，使用媒体查询。

我参考了这里，并尝试实施，但不成功。

我的正常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属性- min-width: 240px

- user

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yugandhar Pathi · Accepted Answer

这是你的媒体查询不起作用的几种可能原因。

When you used media query CSS, did you remove your normal CSS? Or did you keep both? If you want to have both, then you need to keep them appropriately else normal CSS will over write the one inside media query.

For example if your css is like this ...
```
@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; ;
}
```
The .container style which is outside the media query will overwrite the one inside the media query.So if there are styles which are specific to resolution of the device then you must wrap them inside the media query.

Styles which are not related to resolution of the device for example like color of heading which is same in all resolutions should be outside the media query.
One possible issue can be media query is not matching with the resolution of the device.
Also please check in which orientation you are trying to view.
If you are testing on browser you will see the styles inside media query only when you reduce the width of the browser to satisfy the media query. Very important! Because by using media query you say to browser that apply this only when width is this much. For example to see the changes inside media query of max-width 241px you need to reduce the width of your browser to less than 240px (just reduce the width of browser to very minimal)

您可以尝试以下媒体查询来适配分辨率为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 */
}

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

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

如何在 Android 版本为 2.2.1 和 2.3.5、屏幕尺寸为 240320 和 480800 的设备上使用媒体查询？