1

stackoverflow についていくつか検索しましたが、どれも私の問題に対処していないようです。したがって、ここに投稿します。

私はテーブルを持っています。6列ありました。携帯電話で表示するときにテーブルがページをゆがめないように、メディアクエリ (@media only screen and (max-device-width: 480px)) を実行しました。メディア クエリ自体は、基本的に、display: none; を実行しているだけです。tr クラスについて。

しかし、私が抱えている問題は、max-device-width が 480px に設定されていることです。ですから、それを超えると畑は元に戻ると考えるのが自然です。私の携帯電話 (Nokia Lumia 800) の解像度は 480x800 なので、縦向きにすると tr が隠れるはずです。ただし、横向きでは、解像度が 800x480 になるため、再表示する必要があります。これは本質的に私の問題です。ビューポート テストを行ったにもかかわらず、再表示されません。

なぜこれが起こるのか誰にも分かりますか？

4

2 に答える 2

1

コードで本質的に何が起こっているかは、ユーザーが 480px 未満の場合です。要素を非表示にするように CSS に指示し、状態は実行時に保存されます。ユーザーが 480px を超えると、この要素を (display:none) 状態から外すルールがありません。

CSS はカスケードで動作するため、最後に指定されたルールがブラウザのデフォルトになります。

480 ピクセル未満のディスプレイ: 非表示を示すクエリがある場合、480 ピクセルを超えるディスプレイ: ブロックを示す別のクエリが必要になります。

于 2013-02-11T19:11:10.870 に答える
0

これを試して

480px を超えるデバイスの場合

@media(min-width:481px){
 tr{
    display:table-row ; /* to show table row*/
  }
}

480px 未満のデバイスの場合

@media(max-width:480px){
 tr{
    display:none;  /* to hide table row*/
  }
}
于 2017-06-13T07:47:54.093 に答える