0

私はブートストラップを使用していますが、div が正しく動作するようにスタイルをページにハード コードする必要があるという問題に直面しています。セレクターを外部で作成すると、html と body セレクターでも応答しません。

モバイル表示オーバーライドのコード

@media (max-width: 480px) {

html body.index { padding-bottom: 0px; color: #000; background-img: none; }

html body object { display: none; }
body div.fuller { display: none; }
footer { display: none; }
body .melt { margin: 0px; padding: 0px; border: solid 5px #000; }
iframe { margin-left: 0px; width: 560px; }
html body .retro { width: 480px; margin: 0px; overflow: hidden; }
}

いくつかのメディア オーバーライドを作成しましたが、インライン スタイルが原因で、そのうちの 1 つが正しく機能していません。.css ファイルに追加したときに機能しない理由について何か考えはありますか? また、これは皆さんがモバイル デバイス用にコーディングする方法ですか? これは私にとって新しいことであり、私はそれに取り組むためのあらゆる方法を受け入れています。

どんなアドバイスでも大歓迎です。

http://galnova.comは私のウェブサイトです

4

2 に答える 2

1

あなたはこれを試すことができます

<link rel="stylesheet" type="text/css" href="screen.css"   media="screen"   />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

また

@media handheld {

html body.index { padding-bottom: 0px; color: #000; background-img: none; }

html body object { display: none; }
body div.fuller { display: none; }
footer { display: none; }
body .melt { margin: 0px; padding: 0px; border: solid 5px #000; }
iframe { margin-left: 0px; width: 560px; }
html body .retro { width: 480px; margin: 0px; overflow: hidden; }
}

また

@media only screen and (max-device-width: 480px) { ... }

また

@media handheld and (min-width: 20em) { ... } /* WIDTH */
@media screen and (max-height: 700px) { ... } /* HEIGHT */
@media screen and (device-width: 800px) { ... } /* DEVICE-WIDTH */
@media screen and (device-height: 400px) { ... } /* DEVICE-HEIGHT */
于 2013-07-04T05:22:15.567 に答える