0

私は Web サイトを開発していて、Retina ディスプレイに関して役立つように svg ファイルを実装したいと考えていますが、バックアップとしてフォールバック png ファイルが必要です。これは html/js/css です。

<div id="band">
</div> <!--band--> 

<script>
        $(document).ready(function() {
                if (Modernizr.inlinesvg) {
                //SVG.
            $('#band').html('<img src="barbGradient.svg"  />');
                } else {
                //No SVG.
            $('#band').html('<img src="barbGradient.png"  />');
            }
         });
</script>

これは CSS です。

}

.no-inlinesvg div#band {
 position: relative;
 top: -950px;
 background-repeat: repeat-x;
 background-image: url('../_images/barbGradient.png');
 z-index: -1;

}

.inlinesvg div#band {
 position: relative;
 top: -950px;
 background-repeat: repeat-x;
 background-image: url('../_images/barbGradient.svg');
 z-index: -1;
}

すべてのブラウザが恐ろしくレンダリングされています! 異なる解像度で 2 つの png を含めることができることはわかっていますが、js メソッドの方がスマートであることがわかりました。どんな助けでも大歓迎です！

4

1 に答える 1

1

私はpngソリューションに固執します。ユーザーの 99.5% は気付かないでしょう。HTML 仕様はこれに対応する準備ができておらず (Editors Draft)、ハッキーな実装のコストが IMO の利点を上回っています。それでもこれが必要な場合は、この解決策を確認してください。繰り返しになりますが、今回はポリフィル開発者の言葉を引用します。

「注: この多くのブレークポイントをサポートすると、DOM のサイズが急速に増加し、実装とメンテナンスの時間が長くなるため、この手法は慎重に使用してください。」

于 2012-09-09T01:48:46.203 に答える