文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用retina.less？

问如何使用retina.less？
EN

Stack Overflow用户

提问于 2014-03-25 04:20:32

回答 1查看 892关注 0票数 0

我正在尝试使用来自retinajs.com的retina-1.1.0.less代码。它不工作，因为背景图像根本没有显示出来。

下面是html：

<head>
<link rel="stylesheet/less" href="../../scripts/retina-1.1.0.less" type="text/css" />
</head>

下面是retina.less：

// retina.less
// A helper mixin for applying high-resolution background images (http://www.retinajs.com)

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.at2x(@path, @w: auto, @h: auto) {
    background-image: url(@path);
    @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;

    @media @highdpi {
    background-image: url("@{at2x_path}");
    background-size: @w @h;
  }
}

#button {
    .at2x('images/button.png');
}

下面是CSS (不过我不认为它有什么关系)：

#button {
    height: 50px;
    width: 50px;
    float: left;
    margin-right: 10px;
}

button.png和button@2x.png都在图像文件夹中。我想我可能没有正确链接到更少的文件，但我不知道如何修复它。

谢谢

less

retina

retina.js

回答 1

Stack Overflow用户

发布于 2014-03-25 14:59:25

问题是没有更少的编译器脚本(七个阶段-最大值建议的)。

下面是html的修复：

<head>
<link rel="stylesheet/less" href="../../scripts/retina-1.1.0.less" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.0/less.min.js" ></script>
</head>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22619780

复制

相似问题

问如何使用retina.less？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用retina.less？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用retina.less？
EN