2

私は電話ギャップ プロジェクトに取り組んでいます。スワイプ表示機能を実装しました。テキストの背景に画像を使用しました。画像サイズは約 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" />

問題: 実装されませんでした。ボックスが表示されませんでした。ただの空の画面でした。

私の実装に間違いはありますか？

4

2 に答える 2

1

アプリでそれを行ったかどうかはわかりませんが、ここでは CSS コードの最後に 2 つのセミコロンがあります

@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; **;**
   }
}
于 2013-06-12T07:49:29.920 に答える
1

まず、このメタ タグを html ファイルに追加します。

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
于 2013-06-12T11:40:25.050 に答える