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

Posted 2023-03-06

【中文标题】android 版本为 2.2.1 和 2.3.5 且屏幕尺寸为 240 * 320 和屏幕尺寸为 480 * 800 的 Android 设备如何使用媒体查询？

【英文标题】：How to use media Queries for android devices with android version 2.2.1 and 2.3.5 and their screen size of 240 * 320 and screen size of 480 * 800?

【发布时间】：2013-06-10 17:30:29

【问题描述】：

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

它在 320 * 480 的屏幕尺寸和 720 * 1280 的屏幕尺寸下完美运行。

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

采取的补救措施：

我想用盒子阴影代替图像。我实现了它，并在 320 * 480 的屏幕尺寸下进行了测试，非常完美。

我想在 240 * 320 和 480 * 800 的屏幕尺寸下使用 Media Query

进行测试

我从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- min-width: 240px

【参考方案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 的所有设备。

【讨论】：

Yugandhar Pathi，谢谢，您的回答让我对媒体查询有了更多的了解。你能解释一下第一点吗？我应该如何拥有正常的 CSS 和媒体查询 CSS？

用户，我已经在答案中添加了解释。

你是对的......为什么我问你仍然没有得到实施。所以，我想如果我误解了你的第一点。我希望我已经理解你所说的......请检查问题的编辑版本。

像这样包裹另一个 .container @media only screen and (min-width: 240px) .container... 然后这将适用于宽度大于 240px 的设备。

这是因为您的设备宽度与两者都匹配，因此第二个 css 中存在的任何一个都会覆盖第一个。为了摆脱这种情况，将 mediaquery 的 min 更改为 241px。