48 
@media only screen and (max-device-width : 640px) {
/* Styles */
}

@media only screen and (max-device-width: 768px) {
/* Styles */
}

これは私がこれまでに持っているものです。私が取り組んでいるモバイル サイトの PSD モックアップは、幅 640px です。もう 1 つはサイトのタブレット バージョンで、768px です。max-width のみを使用して Web ブラウザーでサイトをテストすることができましたが、今度はこのサイトをデバイスで動作させる時が来ました。通常のフルサイズの Web ページをまだレンダリングしています。上記の 2 つのクエリは、私の最善の推測です。どこが間違っていますか？

4

3 に答える 3

9

編集注:これは特に古いブラウザーで機能する方法です。受け入れられた回答は、これを簡単にするメディアクエリを備えた、より最新の CSS に更新されました。古いブラウザーに固有の CSS には、主に古いコードを使用することをお勧めします。

最初に特定の幅を使用したり、方向をいじったり、その他のナンセンスを使用したりする代わりに、次のメディアタグを使用することをお勧めします...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
  /* Your click-specific css goes here */
}

そして、これらのタグを何に使用しますか? ホバー & クリック イベントとタッチ イベントの設定を行います。

上記の灰色の領域にある一部のデバイスを除いて、タッチ デバイスの解像度はデスクトップ デバイスとは大きく異なります。これは、デザイン要素ではなく、ナビゲーション要素を設定するために行ってください。一部の思慮深い人は、max-width の狂気の方が良いかもしれないと泣くかもしれませんが、非常に多くの HD フォンがあり、device-max-width がすぐに役に立たなくなるのはばかげています。

ただし、幅メディア幅クエリを使用する必要があります。ただし、max-device-width を気にしないでください。max-width と min-width だけを指定してください。上記のタグでタッチ ユーザーと非タッチ ユーザーを区別し、ウィンドウ サイズに基づいて最小幅と最大幅を識別し、サイトのビジュアルを調整します。

さらに、モニターでさえさまざまな向きに配置できるため、向きを使用してモバイルかどうかを判断するのはばかげています (私が見た 3 台のモニターの一般的なセットアップは、縦向きの中央のモニターと横向きの側面のモニターです)。

幅のビューの場合は、サイトに実際にアクセスしているデバイスの種類を無視して、さまざまな幅でサイトをきれいにすることに集中してください。画面がさまざまなサイズできれいに表示されるようにしてください。これは、デスクトップとモバイルの両方に適用できる優れたデザインです。画面の左上隅の小さなウィンドウにあなたのサイトを参照用 (またはすぐに気を散らすため) に表示し、画面の大部分を別の場所で使用している場合、それはモバイル ユーザーだけでなく彼らにとっても、より小さな幅が構築されています。他のことをしようとすると、Web 開発にとって非常に苦痛で自滅的な道をたどってしまいます。したがって、幅が狭い場合は、幅を好きなように設定できますが、個人的に好きなものをいくつか含めます.

全体として、このようなものが必要です...

@media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
    #touch_logo {
       display: inherit;
    }
    #mouse_logo {
       display: none;
    }
  /* Your touch-specific css goes here */
}
@media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
    #touch_logo {
       display: none;
    }
    #mouse_logo {
       display: inherit;
    }
  /* Your click-specific css goes here */
}
@media (min-width: 541px){
  /* Big view stuff goes here. */
}
@media (max-width: 540px) and (min-width: 400px){
  /* Smaller view stuff goes here. */
}
@media (max-width: 399px){
  /* Stuff for really small views goes here. */
}

ただし、ページの head に次の内容を含めることを忘れないでください。

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

場合によってはまだ壊れる可能性がありますが、これは他の多くのソリューションよりも簡潔で完全なはずです。

于 2015-03-27T17:54:25.047 に答える