0

LESS CSSとRetinaJsを使用して、背景画像を網膜画像にしようとしています。

RetinaJSユーザーガイドで提案されているように、次の内容のretina.lessファイルを含めました。

.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  @at2x_path: ~`"@{path}".split('.').slice(0, "@{path}".split('.').length - 1).join(".") + "@2x" + "." + "@{path}".split('.')["@{path}".split('.').length - 1]`;

  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: url(@at2x_path);
    background-size: @w @h;
  }  
}


.topMenu {
    .at2x("../../resources/img/topMenuTitle.png");
}

Firefoxでテストすると、エラーが発生します。

b.value in undefined
in retina.less
@xxxxxxxxxx/resources/js/less-1.3.min.js:8
t@xxxxxxxxxx/resources/js/less-1.3.min.js:8
[...etc...]

Safari（iPhone 4）では：

'undefined' is not an object
in retina.less on line null, column 0:
NaN    background-image: url(@path);

同じフォルダーにtopMenuTitle.png（320px x 40px）とtopMenuTitle@2x.png（640px x 80px）の両方があります。

何が問題になるのか考えてみませんか？

4

2 に答える 2

0

私は解決策を見つけました

background-image: url(@path);  --->  background-image: url("@{path}");

background-image: url(@at2x_path); --->  background-image: url("@{at2x_path}");

.at2x("../../resources/img/topMenuTitle.png"); ---> .at2x('../../resources/img/topMenuTitle.png');

これが誰かに役立つことを願っています

于 2012-09-16T21:32:06.280 に答える
0

何か間違ったことをしたかもしれませんが、上記の手順はうまくいきませんでした。retina.lessの最新のブランチに更新することでうまくいきました。ただし、メインのWebサイトからではなく、 Githubからのバージョンを意味します。 https://github.com/imulus/retinajs/blob/master/src/retina.less

于 2013-08-03T03:15:01.373 に答える