如何使用Android版本2.2.1和2.3.5的Android設備的媒體查詢，他們的屏幕尺寸為240 * 320，屏幕尺寸為480 * 800？

Question

我不得不使用尺寸為304 * 250的圖像。

它的屏幕尺寸為320 * 480，屏幕尺寸為720 * 1280。

現在當我想在240 * 320的屏幕尺寸和480 * 800的屏幕尺寸中檢查相同的內容時？ 無論是背景圖像還是數據值都沒有。

采取的補救措施：

我想過使用盒子陰影而不是圖像。 我實現了它，並在320 * 480的屏幕尺寸上進行了測試。它非常完美。

我想使用Media Query在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 最小寬度：240px

Answer 1

這些是您的媒體查詢無法正常工作的幾種可能性。

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樣式將覆蓋媒體查詢中的.cono。如果存在特定於設備解析的樣式，則必須將它們包裝在媒體查詢中。

   與設備分辨率無關的樣式（例如，在所有分辨率中相同的標題顏色）應在媒體查詢之外。

2. 一個可能的問題是媒體查詢與設備的分辨率不匹配。

3. 另外，請檢查您要查看的方向。

4. 如果您在瀏覽器上進行測試，只有當您減小瀏覽器的寬度以滿足媒體查詢時，才會在媒體查詢中看到樣式。 很重要！ 因為通過使用媒體查詢，你只對寬度這么多的瀏覽器說。 例如，要查看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 */
}

注意：對媒體查詢要非常謹慎。 當你設置最小值和最大值時，它們將適用於滿足最小值和最大值的所有分辨率。例如，上述媒體查詢將適用於寬度大於480的所有設備。