1

次の行を index.html に追加しました。

 <link href="css/style.css" media="all  "rel="stylesheet" type="text/css" />

これが私のメディア クエリ CSS です。

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
     #mapArea .white span {
        width: 100px;
     }

}

しかし、ブラウザで確認すると、機能しません。私の問題は何ですか？どうすれば修正できますか？

(すべての最新ブラウザをテスト済み)

4

2 に答える 2

17

device-widthラップトップまたはデスクトップでこれらのクエリを起動しない場合は、 をクエリしています。それらをに変更するmin-widthと、クエリが機能するはずです。

また、HTMLの中にviewportメタ タグがあることを確認してください。<meta name="viewport" content="width=device-width,initial-scale=1.0"><head>

于 2013-06-20T15:57:35.360 に答える
7

@media only screenとは定義が異なります@media screen。

キーワード 'only' を使用して、古いユーザー エージェントからスタイル シートを隠すこともできます。ユーザー エージェントは、'only' キーワードが存在しないかのように、'only' で始まるメディア クエリを処理する必要があります。

ソース: http://www.w3.org/TR/css3-mediaqueries/

多分あなたはこれに変更を試みることができます：

@media screen and (min-width : 320px) and (max-width : 480px) {
  .white span {
      width: 100px;
  }
}
于 2013-06-20T08:15:23.430 に答える