0

私のウェブサイトを iPad iPhone で動作させるのに 2、3 週間しかありません。余白とフォント サイズを変更する必要があるだけです。このコードを追加するように言われたこのチュートリアルをオンラインで見つけました：

<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)"  href="css/style_ipad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/style_ipad.css" />
<!--<![endif]-->

そのため、これを通常のスタイルシートへのリンクのすぐ上に追加し、style_ipad.css を調整してアップロードしましたが、機能しませんでした。なぜこれがうまくいかないのか誰にも分かりますか？これは時代遅れですか？

4

2 に答える 2

2

古いものではありませんが、通常のスタイルシートの上に追加したとのことなので、スタイル ルールが上書きされている可能性が高いです。結局のところ、それらはカスケードスタイルシートです。

css/style_ipad.cssまた、両方のリンク タグで同じファイル にリンクしていることを指摘したいと思います。

于 2012-06-13T00:39:43.317 に答える
1

"device-width" を使用してメディア クエリを定義する場合は、レンダリング画面の実際のピクセル幅を参照していることに注意する必要があります (Retina ディスプレイでは扱いが難しくなります) 。http://www.w3のセクション 4.3 を参照してください。 .org/TR/css3-mediaqueries/ . 実際の幅を取得するには、ピクセル比を使用してそれを考慮する必要があります。

ただし、メディアクエリを変更して、ドキュメントが出力されるブラウザー/ビューポートの幅を確認することもできます。deviceクエリの一部を削除するだけです。

<link type="text/css" rel="stylesheet" media="only screen and (max-width: 480px)"  href="css/style_ipad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 768px) and (max-width: 1024px)" href="css/style_ipad.css" />

device-widthとの違いのより完全な定義については、次の 2 つの回答を参照してくださいwidth。

モバイル Web の max-device-width と max-width の違いは何ですか?

CSS メディア クエリの幅とデバイス幅の違い

于 2012-06-13T23:12:03.320 に答える