4

レスポンシブおよびアダプティブ レイアウトを処理する際に画像 (またはスプライト) を処理する最良の方法は何ですか? 私が今行っている方法は、ビューポートのサイズに基づいた条件付きの画像選択を持つメディア クエリを使用することです。より良い方法とその理由はありますか?.

4

5 に答える 5

1

（サイズ変更）imagesもしたい場合は、お勧めできません。単一の画像として使用することをお勧めしますが、画像が（サイズ変更されていない）場合は、スプライトとして使用できます。responsivespriteresponsive

応答性のある要素を決して与えないspritesでください。修正する必要がありbackgroundますheight。width

于 2012-05-09T13:03:51.017 に答える
1

私の経験では、レスポンシブ デザインは半分が動的/サイズ変更可能なコンテンツ (フレックス ボックス、ベクター/スケーラブルな画像など) を作成し、半分がメディア クエリを使用しています。

スケーラブルな画像については、高品質を維持する必要があるアイコン/小さな画像または大きな/ユーザーがアップロードした画像について話していますか?

アイコン/小さな画像 (.png 画像スプライトに入れるようなもの) の場合、無限にスケーラブルなベクター画像を試してみます。

  • アイコン フォント (単一色のアイコンでのみ機能しますが、CSS でスタイルを設定できるため、操作が非常に簡単です):

http://css-tricks.com/examples/IconFont/ http://fortawesome.github.com/Font-Awesome/#base-icons

必要なソフトウェア: ベクター イメージ エディター (Adobe Illustrator、Inkscape) およびフォント エディター (FontCreator、FontForge)。

  • SVG - 操作が少し複雑ですが、より複雑なグラフィックスを処理できます。

必要なソフトウェア: ベクター イメージ エディター (Adobe Illustrator をお勧めします) メディア クエリを使用せずに完全にサイズ変更可能な SVG のページの例を次に示します: http://emacsformacosx.com/

ベクター グラフィックスの利点は、どの画面サイズでも機能し、通常は読み込みが速い (ファイルサイズが小さい) ことです。

これは、いわば「氷山の一角」にすぎません。具体的な質問があれば、喜んで共有します。ソフトウェアのセットアップを取得して上記のクロスブラウザを実装する方法を理解するのにしばらく時間がかかりました（たとえば、4.0未満のAndroidはSVGをサポートしていないため、.pngスプライトに依存する必要があり、サイズ変更可能なjavascriptファイルを作成しましたスプライト - 「伸縮性のあるスプライト」の投稿に似ています) - これは、単色のアイコンで済む場合、アイコン フォントのもう 1 つの利点です。

于 2012-05-31T18:20:18.617 に答える
1

この方法を試すことができます: Stretchy Sprites (instructions & demo) - Pure HTML/CSS with no reliance onbackground-size

于 2012-05-31T02:46:34.563 に答える
0

Matt Wilcox による Adaptive Images は、おそらくあなたが求めているものです。

http://adaptive-images.com/

Javascript を使用してユーザーの画面サイズを考慮し、利用可能なサイズに応じてキャッシュされたサイズ変更されたバージョンの画像を提供します。

基本的には、キャッシュされた小さな画像を探し、見つかった場合は提供し、見つからない場合は作成します。

于 2012-05-09T15:13:33.670 に答える
0

私は最近、このテーマに関する資料をかなり見直しました。利用可能な方法論はかなりありますが、どれも絶対的なものではありません。静的なすべての画像 (図像など) には背景画像 (background-size: contain または background-size: cover を使用) を使用しました。ただし、動的に生成された画像は、洗練された (非スクリプト) パラダイムで管理するのは困難です。したがって、多くのスクリプトを確認した後、独自のスクリプトを作成しました。これが役立つことを願っています：

/**
 * Retina image update script. Invoke with Retina.render().
 * Retina.render() may be passed a selector for img selection.
 * The default filter looks for img's with data-scale="retina".
 * @param {string|function} expr    A CSS selector expression or jQuery filter function.
 * @return {boolean|collection}     Returns false or (for Retina displays) the images updated.
 * @author Joe Johnson
 */
(function(ns,$){
    ns.Retina = {
        render: (function(isRetina){
            return isRetina ? function(expr){
                var r1 = /retina/i, r2 = /\d{3}/,
                    filter = expr ? expr : function(){
                        return r1.test($(this).data("scale"));
                    };
                return $("img").filter(filter).each(function(){
                    this.src = this.src.replace(r2,function(m){
                        return (parseInt(m,10)>=640 ? m : 2*m);
                    });
                });
            } : function(){ return false; };
        })(ns.devicePixelRatio && (ns.devicePixelRatio > 1))
    };
})(window,jQuery);

ファイル名の規則に依存する必要があることに注意してください (この場合、r2 -- 正規表現 -- は、ディメンション [img/blah/320/ image.jpg は img/blah/640/image.jpg に更新されます. 640 より大きい番号を含むディレクトリを持つ src を既に持っている画像は、Retina ディスプレイに十分な大きさであると想定しているため、スキップされます (私がこれを使用したサイトでは、ディレクトリ /img/dir/320/、/img/dir/640、および /img/dir/960 に画像があります)。

于 2012-09-08T02:08:20.183 に答える