0

私はCSSメディアクエリにあまり触れていません。私は基本的に実験を通して学んでいます。すべてのデバイスで見栄えがするようにWebサイトを最適化しようとしています。ブラウザの幅が広い場合は特定のCSSファイル（Retinaディスプレイを含むデスクトップデバイス）、タブレットの場合は別のCSSファイル（iPadまたはRetinaを含むその他）、小さな画面の場合は別のCSSファイルを使用したい（iPhoneまたはその他、Retinaを含む）。私の現在の設定は以下に含まれており、それらからの結果です。

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px), screen and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/phone.css" /> <!-- Phone -->

これはデスクトップコンピュータではうまく機能しますが、RetinaディスプレイのMacBookProはデスクトップファイルではなく電話CSSファイルを使用します。iPadはタブレットに最適化されたバージョンを表示しますが、RetinaディスプレイiPadは電話に最適化されたCSSファイルを使用します。iPhoneはPhoneCSSファイルを使用してページを表示し、RetinaディスプレイiPhoneもページを表示します。テストできるのはAppleデバイスしかないため、自分のサイトが他のデバイスでどのように表示されるかわかりません。

したがって、私のCSSリンクは明らかに正しく設定されていません。どうすればこれを正しく設定できますか？Retinaディスプレイ以外の特定のデバイスをターゲットにしたくありません。Windowsタブレットでは、iPadだけでなく、タブレットのCSSファイルを使用する必要があります。これは、3つのCSSリンクと3つのファイルで実行できますか？1つはデスクトップ用（1024ピクセルより大きい？）、1つはタブレット用（1024ピクセル未満）、もう1つは電話用（640ピクセル未満）ですか？または、これらのリンクを実行してから、Retinaデバイス、rMBP、iPad、およびiPhoneごとにリンクを追加で作成する必要がありますか？または、3つ以上のCSSファイルを作成しますか？

4

2 に答える 2

0

Retina ディスプレイを検出する必要はありません。検出するだけdevice-widthです。

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (device-width : 1024px)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (device-width: 640px)" href="stylesheets/phone.css" /> <!-- Phone -->

Web パフォーマンス上の理由から、これらすべては、@media (...) { selector1 { property: value; } }1 ～ 3 個のファイルを条件付きでロードする代わりに、ルールのメディア ブロックを使用して、1 つの CSS ファイルで実行できます。

于 2013-01-13T05:16:15.613 に答える
0

元の CSS リンクの問題は、2 つの条件 (コンマは代替を意味する) があるが、2 番目の幅条件を提供していないことです。

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px), screen and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px), screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/phone.css" /> <!-- Phone -->

疑似コードの元のリンクは次のように記述できます-

「最大幅が 1024px の画面、または最小デバイス ピクセル比が 2 の画面」

これが、Retina MacBook が電話とタブレットのスタイルをロードしていた理由です。

もちろん、ピクセル密度が高い場合に特定の/異なるスタイルシートをロードしていないため、元のリンクは次のように記述できます-

<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px)" href="stylesheets/phone.css" /> <!-- Phone -->

これは機能的に同等です。

于 2013-01-13T19:16:41.823 に答える