モバイルデザインにメディアクエリを使用する最適な方法

css media-queries
モバイルデザインにメディアクエリを使用する最適な方法

メディアクエリとは何か、なぜ使用されるのかは知っていますが、それらを使用してモバイルサイトを開発するための最良の方法がどのようなものかはわかりません。

例:必要なすべてのスタイルを含むスタイルシートを持つmysite.comがあります(かなり大きなファイルだとしましょう)。 この時点で、私のスタイルはいずれも低い画面解像度やその他のデバイスを対象としていません。

次に、サイトのモバイルバージョンを作成することにしました。 簡単にするために、今のところはiPhoneユーザーのみをターゲットに設定し、コードが誰かがiPhoneで私のサイトにアクセスしたことを検出すると、モバイルバージョンを取得します。

私の質問:これらの余分なスタイルを含めるのに最適な場所はどこですか?そのため、ユーザーにモバイルバージョンが表示されますか? これらのスタイルを元のスタイルシートに含める必要がありますか、それとも独自のスタイルシートに分離する方が良いでしょうか?

私のサイトは完全にフロートで構築されているが、私のモバイル版ではすべての要素が積み重なって表示されるだけだとします。 メディアクエリを使用してそれをどのように示しますか? float:noneを宣言するのと同じくらい簡単ですか?か何か?

基本的に、上記の段落で私が尋ねようとしているのは、たとえば、基本色とリンク位置、またはデスクトップ版と同じようにモバイル版でも違いが残るものなど、スタイルシートをどのように構築するかですモバイル版ですべてを積み重ねるなど?

スタイルシートのメディアクエリセクションのルールは、非メディアクエリセクションで宣言したものを基本的に「オーバーライド」しますか?

メディアクエリの使用例はたくさんありますが、完全なサイトの実例は見つかりません。 同じHTMLページにmobile.cssとmain.cssがリンクされている場合、モバイルバージョンではサイトの一部を保持し、他を変更するにはどうすればよいですか?

最後の質問:幅を完全に固定したデザインで、メディアクエリを使用することは可能ですか? コードは、ブラウザーが特定の幅/高さを超えて縮小または拡大することを検出できますか?

長くて恐らく紛らわしい質問でごめんなさい。 あなたが私が尋ねようとしていることを伝えることができることを願っています。

  5  6


ベストアンサー

これを行うには、少なくとも4つの方法があります。

  1. 通常のCSS、下部にメディアクエリ(したがって、CSSをオーバーライドします)
    上記)

  2. リンク要素でメディアクエリを使用してロードされた2つ(またはそれ以上)のCSSファイル

  3. HTMLに異なるCSSリンクを追加するサーバー側の検出

  4. サーバー側の検出、m.example.comへのリダイレクト、または
    example.com/mobile

マイナーな変更(float:none、異なるフォントサイズなど)について話している場合は、1に進みます。 CSSに多くの変更がある場合、2または3を使用します(画面プロパティではなく、ユーザーエージェントに依存しているため、3は適切ではありません)。 HTMLとCSSが変更された場合、4を使用します。

これらすべてについて、Internet Explorer 6〜8で作業を確認してください。メディアクエリを無視し、1を使用する場合はモバイルビットを含むすべてのCSSを使用する場合があります。

1と2を使用しているサイトの例については、http://mediaqueri.es/をご覧ください。

ここに役立つ別のリソースがあります:https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

9


モバイルブラウザ/デバイスの検出にだまされないことをお勧めします。これは、メディアクエリが優れている場所です。 より有機的に考えて、新しいデバイスやモバイルブラウザでWebサイトを常に更新する代わりに、1つのCSSファイルを使用して、CSS3のmax-width / max-device-widthを利用してください。

場所」

ヘッダーとCSSファイルで、デスクトップバージョンとモバイルバージョンに解析します。

/* Desktop Version */

@media screen {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

/* SmartPhone Version */

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/m_bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

1


オプション3はお勧めしません。 スニッフィングは何度も悪い選択であることが証明されています。 デバイス/ブラウザが間違った情報を提示するとどうなりますか? 簡単に乗っ取られます。

しないでください。 メディアクエリすべて。 サポートされている標準です。

1


オプション3をお勧めします。

デバイスを検出するためにスニッフィングするユーザーエージェントは悪くありません。 これは何年も前からモバイルWebサイトを作成するための定数です。 PHPデバイス検出を使用すると、さまざまなデバイスでサイトをより詳細に制御できます。 どのCSSファイルをどのデバイスに送信するかを選択できるだけでなく、デバイスカテゴリごとに読み込むアセット/マークアップも選択できます。モバイル、タブレット、デスクトップ、テレビなど

この方法を使用すると、JavaScriptが無効になっていても、モバイルがデスクトップアセット/スタイル/マークアップを受信して​​いないことを確認できます。

0


タイトルとURLをコピーしました