0

@media ルールの目的は、ビューポートのサイズが変更されたときにさまざまな CSS 設定を適用することです。

ビューポートが減少したときに水平メニュー バーを選択ボックスに置き換えるレスポンシブ メニューの例を挙げると、選択ボックスと水平メニューの両方のコードがあります。ビューポートが変更されたときにどちらかを非表示にできるようにします。小さなビューポートの画像を置き換える場合と同じです。さらに、異なるビュー ポートのすべての CSS がクライアント マシンに読み込まれます。

ウェブページ全体のサイズが大きくなると思います。

条件付きローディングを行うことができるか、または他の効果的な代替手段があれば教えてください。

私が理解する方法の 1 つは、ユーザー エージェントに基づいてサーバー側にいくつかの条件を設定することです。ただし、HTML サイトでは機能せず、多くのサーバー側コードが必要になります。

4

1 に答える 1

1

HTML ファイルのサイズよりも画像のサイズに集中できる場合は、いくつかのアイデアがあります。

  • アダプティブ イメージは画面サイズを検出し、(設定したブレーク ポイントに基づいて) 適切なサイズのイメージを自動的に配信します。サイトにさかのぼって適用できるため、適切なソリューションであるかどうかを簡単に確認できます。

  • 背景画像で div を作成すると、さまざまなビューポートでさまざまな背景画像を簡単に指定できるため、モバイル用に縮小したフルサイズの画像を読み込むよりも効率的です。

  • Foundation は ZurbのInterchangeを導入しました。Interchange はAdaptive Images に似た機能を提供し、デバイスに適した画像を提供します。

うまくいけば、これらのアプローチのいずれかがうまくいくかもしれません。幸運を！

于 2013-06-23T11:25:48.040 に答える