0

SASS/Compass を使用してレスポンシブ Web サイトを構築しており、(生成されたスプライトを使用して) Retina アイコンを含めています。mixin を使用して .scss にアイコンを含めます。

私の網膜アイコンミックスイン：

// Retina icons
@mixin sprite-background($name, $xpos: 0px, $ypos: 0px, $xpos2x: $xpos, $ypos2x: $ypos, $size: image-width(sprite-file($icons, $name))) {
  background-image: sprite-url($icons);
  background-position: sprite-position($icons, $name, $xpos, $ypos);
  background-repeat: no-repeat;
  display: block;

  @media all and ($pixel-ratio) {
    @if (sprite-position($icons, $name) != sprite-position($icons2x, $name)) {
      background-position: $xpos2x $ypos2x;
    }
    @include background-size($size auto);
    background-image: sprite-url($icons2x);
  }
}

変数：

$pixel-ratio: "-webkit-min-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5";

使用法：

.selector {
  @include sprite-background(clock_small, 0px, 2px, 0px, -1013px, 45px);
}

私が抱えている問題は、Internet Explorer 8 が Retina スプライトを として使用していbackground-imageて、background-size. IE8 がサポートされていないbackground-sizeため無視されることはわかっていますが、これはアイコンの配置が正しくないことを意味します。

JavaScript を使用すると、現在のピクセル比率を確認できます。

alert(window.devicePixelRatio);

これは次のように警告します: undefinedInternet Explorer で。私の「網膜メディアクエリ」undefinedが有効な数値として受け入れ、その css を実行するのはなぜですか? これに対する回避策はありますか?

4

1 に答える 1

0

未定義の場合は、devicePixelRatio のデフォルト値を割り当てることができます

window.devicePixelRatio = window.devicePixelRatio || 1
于 2013-12-11T21:12:29.007 に答える