2

スタイルシート全体で特定のメディア クエリ条件が満たされている場合、(高解像度画像の経路を維持するために) いくつかの LESS 変数を変更したいのですが、うまくいかないようです。

// Default
@logo:                   'logo.png';
@sprite:                 'sprite.png';

// High resolution displays
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    @logo:               'logo@2x.png';
    @sprite:             'sprite@2x.png';
}

おそらく、これに対するより簡単な解決策がありますか？

4

1 に答える 1

1

高解像度画像に対応するために画像ファイルの名前を変更する代わりに、すべての高解像度画像を同じ名前の別の「2x」フォルダーに保存します。

@CDNURL: "http://cdn.mycommany.com/assets/";
@CDNURL-High-Res: "@{CDNURL}2x/";

@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";

.BGImage-HD(@image) {
  background-image: url('@{CDNURL}@{image}'); 

  @media @highdensity {
    background-image: url('@{CDNURL-High-Res}@{image}');
  }
}

//Usage
.logo {
  .BGImage-HD("logo.png");
}
于 2014-03-27T21:17:42.230 に答える