0

私が取り組んでいる Web サイトには、背景画像と別のヘッダー画像があります。メディア クエリを使用してそれらを取得し、ヘッダー画像のテキストをさまざまな画面に合わせて適切にサイズ変更したいと考えています。さまざまなチュートリアルに基づいて多くのオプションを試してみましたが、スタイルシートが正常に機能しているとはまだ思えません。これが私のcssの例です：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
 img {max-width: 90%;}
   #wrapper { max-width: 90%; }
   #wrapperbg { max-width: 90%; }
   #header { max-width: 90%; }
   #navlist { max-width: 90%; font-size: 80%; font-family: agency, 

sans-serif; }
   #navlist2 { max-width: 90%; }
   #navlist li {max-width: 10%; font-size: 1.5em; font-family: sans-serif; }
}

ヘッダーにも次の行を含めました。

<meta name="viewport" content="initial-scale=1.0, width=device-width"/>

レスポンシブ デザインにメディア クエリを使用するのは初めてなので、無知な間違いを犯していることはわかっています。どんな助けでも大歓迎です。ありがとうございました。

4

2 に答える 2

0

wordpress テーマでメディア クエリを使用する際に問題が発生したため、携帯電話用の特別なプラグインをダウンロードし、その方法でスタイル シートを作成して修正しました。単に「モバイルCSS」と呼ばれています。実際にプラグイン内で、iPad での横向きと縦向きなどのメディア クエリを作成しました。

于 2012-12-31T17:47:49.777 に答える
0

そうあるべきだと思う

@media screen and (min-width:768px) and (max-width:1024px) and (orientation : portrait)
{
    //...
}

詳細については、これを参照してください。

于 2012-07-03T21:33:10.250 に答える