1

Web ページがメディア クエリ属性に応じて反応できるようにしようとしています。私はウェブ全体を検索し、このユニバーサルメタコードを見つけました

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

私のCSSでは、それに応じて変更します

@media only screen and (max-device-width: 720px) {

#homebutton input[type=image] {
   position:absolute;
   left:0%;
   top:0%;
   margin: 0px;
   height:700px;
}

異なるモバイル インターフェイスの両方で Opera モバイル エミュレーターで試してみました

  1. WXGA 横向き 1280x800
  2. HD ポートレイト 720x1280

しかし、私のホームボタンは元のサイズのままで、以下のようになっています

#homebutton input[type=image] {
  position:absolute;
  left:0%;
  top:0%;
  margin: 0px;
  height:70px;
}
4

2 に答える 2

3

700px(@mediaブロック内の) ルールがルールの上に70pxあり、後者がブロックの外側に適用される場合、それはすべてのメディアのルールを@media上書きします。700px

ブロックが一般的な規則をオーバーライドするため@mediaには、スタイルシートでブロックをブロックの下に移動する必要があります。

説明については、この質問に対する私の回答を参照してください。

于 2013-07-24T09:10:21.427 に答える
0

レスポンシブ レイアウトを検索することもできます。幅要素を使用してすべてのデバイスをターゲットにすることをお勧めします。これを使用してみてください。

@media (max-width: 720px) {
  #homebutton input[type=image] {
    height:700px;
  }
}

また、要素の属性を変更したくない場合を除き、メディア クエリで指定する必要はありません。

于 2013-07-24T09:14:01.233 に答える