0

スマートフォン用の CSS を定義しようとしていますが、CSS の他のすべてはそのままでかまいません。

CSS:

.content { background: orange; padding: 30px; }
#mobile { display:none; }

@media screen and (max-device-width: 480px){
    #mobile { display: block; }
    #desktop { display: none; }
}

HTML:

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div id="mobile">this is mobile</div>
  <div id="desktop">this is desktop</div>
</body>
</html>

ライブデモ: http://jsfiddle.net/L5zDQ/

上記のデモでブラウザ ウィンドウを縮小すると、「これはモバイルです」は表示されません。私は何が欠けていますか？

4

2 に答える 2

1

を使用する代わりに を使用max-device-widthする必要がありますmax-width。これは、ブラウザの現在の状態のサイズに依存します。

@media screen and (max-width: 480px) {
    ...
}
于 2013-01-28T19:51:00.003 に答える
0

max-device-width は画面のサイズであり、ウィンドウのサイズを変更しても変化しません。

必要なmax-widthのは、ブラウザー ウィンドウのサイズと比較することです。

@media screen and (max-width: 480px){
    #mobile { display: block; }
    #desktop { display: none; }
}

このトピックに関するもう少しの議論については、この質問を参照してください。

于 2013-01-28T19:51:19.740 に答える