3

サイズが 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;
        }
    }

これは小型のデバイスであり、2 番目の CSS を使用しています- min-width: 240px

4

1 に答える 1

2

これらは、メディア クエリが機能しない理由のいくつかの可能性です。

  1. メディア クエリ CSS を使用していたときに、通常の CSS を削除しましたか? それとも両方飼った？両方が必要な場合は、それらを適切に保持する必要があります。そうしないと、通常の CSS がメディア クエリ内の 1 つを上書きします。

    たとえば、あなたの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メディア クエリの外側にあるスタイルは、メディア クエリ内のスタイルを上書きします。そのため、デバイスの解像度に固有のスタイルがある場合は、それらをメディア クエリ内にラップする必要があります。

    すべての解像度で同じ見出しの色など、デバイスの解像度に関連しないスタイルは、メディア クエリの外にある必要があります。

  2. 考えられる問題の 1 つは、メディア クエリがデバイスの解像度と一致していないことです。

  3. また、表示しようとしている方向を確認してください。

  4. ブラウザーでテストしている場合、メディア クエリを満たすためにブラウザーの幅を縮小した場合にのみ、メディア クエリ内にスタイルが表示されます。非常に重要です。メディア クエリを使用することで、幅がこのくらいの場合にのみこれを適用するというブラウザに言うためです。たとえば、最大幅 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 より大きいすべてのデバイスに適用されます。

于 2013-06-14T08:02:29.500 に答える