-1

私は現在のデザインをレスポンシブにすることに取り組んでいます。使い始めました@media screen...が、デザインは何も変わりません。を使用して、フォントのサイズを変更するのに少なくとも役立つかどうかを確認しようとしましたhtml, div, p, a, li, td { -webkit-text-size-adjust: none; }が (私は em を使用しています)、何も変わりませんでした。

それから私はに切り替えました<link type="text/css"...。現在、HTML ドキュメントにリンクされている 3 つのメディア クエリ ファイルがあり、HTML5/CSS3 を使用しています。

私の質問は: ドキュメントが最初のファイルのみを参照しているのはなぜですか? 私はコア スタイルシートを取り出し、直接対象となるシートだけを使用して、最初のスタイルシートを使用するだけで停止するかどうかを確認しましたが、そうではありませんでした。フォントのサイズは変更されていません。コンテナーのサイズは変更されません。画像はサイズ変更または削除されません。最初のスタイルシートのみが参照され、その他は無視されます。

これらは私の現在のリンクされたスタイルシートです:

<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 800px)" href="scripts/css/style800.css" />

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="scripts/css/style1024.css" />

編集: スタイルシートは変更されますが、スタイル自体は変更されません。1280 スタイルシートがそのスタイルで他のすべてをオーバーライドしているようです。

4

2 に答える 2

1

それらをどのようにデバッグしますか？ブラウザのサイズを変更してみてください。これらは機能するはずです。また、私は実際には800pxを使用することをお勧めしません。iPadもそれに該当するので、767を使用する方が良いでしょう。

于 2012-05-10T18:59:53.980 に答える
1

max-device-width ではなく max-width を探しているのではないでしょうか?

前者はブラウザなどの表示領域、後者は実際のデバイス領域です。

また、最後に最小のもの (この場合は 800px) を配置します。

これを試して：

<link rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link rel="stylesheet" media="only screen and (max-width: 1024px)" href="scripts/css/style1024.css" />
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="scripts/css/style800.css" />
于 2012-05-10T19:46:51.497 に答える