css - レスポンシブレイアウト - 非表示の div を表示しますか?

Question

私はレスポンシブレイアウトにまったく慣れていません。1 つのことを除いて、すべてがうまく機能しているようです。'display: none;'プロパティを使用して div を作成できず'display: block;'、メディアクエリで設定すると表示されます。

#test {
display: none;
}
@media screen and (max-width:320px) {
   #test {

      display: block;
   }
}

これには jQuery が必要ですか?

score 1 · Accepted Answer

1 0 1最初のルールの特異性はであるのに対し、2 番目のルールの特異性はであるため、コードは期待どおりに実行されません1 0 0。

#testの代わりに, と書くだけでもdiv#test機能します。これは、2 つのルールが同じ特異性を持つ場合、最後のルールが適用されるためです。

CSS の詳細については、こちらをご覧ください。

score 0 · Accepted Answer

使用する：

#test {
  display: none;
}

常に一意になるdiv#testため、を書くのは無意味です。パフォーマンスが低下するだけです（0.000000000001sのように;-)）#testdiv#test

score 0 · Accepted Answer

div を表示するには、CSS で「重要」を指定する必要があります

@media screen and (max-width:320px) {
  #test { block !important;}
}

score 0 · Accepted Answer

#test を正しく選択していません:

div#test { display: none; }

@media screen and (max-width:320px) {
   div#test { display: block; }
}

score 0 · Accepted Answer

あなたのコードは正しく、jquery はまったく必要ありません。画面サイズが 320px より小さい場合にテスト div が表示されます。逆に最小幅を使用する場合。これが例です

css - レスポンシブ レイアウト - 非表示の div を表示しますか?