1

私はCSSの世界にまったく慣れていないので、メディアクエリは言うまでもなく、どんな助けでも大歓迎です!

私は学校の課題に取り組んでいます。そこでは、メディアクエリをテストし、さまざまなデバイスサイズに合わせて異なるスタイルシートを用意する必要があります。私は基本的にこの投稿で説明したのと同じ問題を抱えていると思います:メディアクエリ-モバイルvsデスクトップブラウザ。しかし、そのコメント投稿者がどのように問題を解決したかは私にはわかりません。

これはおそらく、エラーが存在する関連するコーディングだと思いますか?:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--container div tag-->

<!-- Low res -->
<link href="colors2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 128px)" />
<!-- Mid res -->
<link href="colors3.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 176px)" />
<!-- High res -->
<link href="colors4.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 240px)" />
<!-- Touch -->
<link href="colors5.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px)" />

クエリはデスクトップブラウザで機能しますが、Opera Mobile Emulatorで(私が思うに)正しい画面解像度でページを起動すると、すべてデフォルトの最小幅320pxスタイルになります。タグにも「、screen」と(min-device-width:」を追加しようとしましたが、何らかの理由で両方を追加すると、すべてがキャンセルされ、基本的なHTMLが白い画面に表示されてしまいます。また、@ mediaを試してみましたが、以下のスタイルを投稿しましたが、Dreamweaver 6はそれらを拒否しているようです(???)。

だから...私はどんな助けにも非常に感謝します!また、最小幅が非常に小さいことが割り当ての一部であることにも言及する必要があります。個人的には小さすぎると思います!本当にありがとう:)

4

1 に答える 1

0

Opera Mobile Emulatorは、実際のアプリとは大きく異なります。モバイルデバイスでサイトをライブでテストすることをお勧めします。

于 2012-11-10T21:13:21.580 に答える