23

おそらく3つの異なる「状態」を含むレスポンシブレイアウトをコーディングしようとしています。

風変わりな部分は、テキストの多くがイメージであることです。たとえば、メニュー項目はイメージです。これは私の考えではありません。変更することはできません。

画像は状態ごとにサイズ以外にわずかに異なるため (たとえば、最小の状態では、メニューは通常のヘッダーではなくフローティング ボタンになります)、同じ画像をスケーリングするだけでなく、画像を切り替える必要があります。

それがなかったら、おそらく「adaptive-images.com」を使っていたでしょう。

そのため、このためのベスト プラクティス ソリューションに関する情報が必要です。

私が考えることができるもの：

  • 画像を背景として読み込む – 少し不潔に感じます.

  • 両方のバージョンを挿入し、css 表示プロパティを切り替えます – 非常に不潔です!

  • すべての img リンクを設定する JavaScript を作成します。少しやり過ぎに感じますか?

良い解決策に座っている人はいますか？:)

4

5 に答える 5

14

ほんの数枚の画像 (そしてそれらが最適化されている) であれば、CSS でそれらを非表示にしても問題ありません。それが多い場合は、オンザフライで変更するResponse JSを見てください。srcこれを試して：

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
]}'>

<img src="small.png" data-min-width-481="medium.png" alt="example">

こちらの記事もお読みください。

更新- 追加の例:

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
  , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] }
]}'>

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">
于 2012-05-04T07:03:36.440 に答える
14

今日のブラウザのほとんどはタグをサポートしています。 pictureしたがって、ビューポートの幅に応じて画像を変更するために使用できます。

<picture>
    <source media="(min-width: 1200px)" srcset="/img/desktop-size.png">
    <source media="(min-width: 768px)" srcset="/img/medium-size.png">
    <img src="/img/mobile-size.png"/>
</picture>
于 2017-10-29T15:47:12.427 に答える
2

複数の画像をロードする必要がなく、帯域幅を節約できるため、私は 3 番目の選択肢のファンです。

モバイル ファーストの設計のため、最初に次のような小さな画像を読み込みます。

<div id="mydiv">
    <img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/>
    <img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/>
</div>

次に、ドキュメントをロードした後、次のスクリプトを実行します。

function resizeImages() {
    var width = window.innerWidth || document.documentElement.clientWidth;
    $("#mydiv img").each(function() {
        var oldSrc = $(this).attr('src');
        if (width >= 768) {
            var newSrc = oldSrc.replace('_normal.','_bigger.');
            var newWidth = 100;  var newHeight = 100;
        } else if ( width >= 480 ) {
            var newSrc = oldSrc.replace('_normal.','_big.');
            var newWidth = 50;  var newHeight = 50;
        }
        $(this).attr('src',newSrc);
        $(this).attr('width',newWidth);
        $(this).attr('height',newHeight);
    });
}

画面の幅が大きい場合、このスクリプトを使用して小さな画像を大きな画像に変更します。デスクトップコンピューターで高速に実行されます。また、スマートフォンでは実行されません。

于 2013-04-27T14:57:02.060 に答える
1

私がすることは:各要素
の背景として画像を使用 し、すべてのサイズのリンク (画像) を持つスプライトを作成します。li

___ ___ ___ ___
__ __ __ __
_ _ _ _

@media を使用するよりも、eg:.

@media only screen and (max-width : 480px) {
 /* here I would make my li smaller */
 /* here I would just change the li background position*/
}

画像の「スプライト」は既にブラウザにロードされており、トランジションは非常にスムーズかつ高速に行われます。

于 2012-05-03T21:28:40.920 に答える