javascript - retina.js无法正常工作-不知道为什么

我没有太多代码可以输入，但是正在寻求帮助以节省头上剩下的头发...

我正在使用retina.js，它不适用于任何图像。 @ 2x图像与较小的图像位于同一文件夹中。如果它们不是尺寸的两倍-设计师发送给我的图像是像素的一两个像素，那么我就不必担心该图像，因为我假设一旦加载了其他图像，则该图像在尺寸调整后就可以使用正确地。

我尝试过速记background:url(foo.jpg)....和background-image:url(foo.jpg)，带有和不带有“”中的图像。我已经辞职了，以为我错过了一些愚蠢的东西，只是没有看到它。任何帮助，将不胜感激!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/index.js"></script>
<script type="text/javascript" src="../js/retina.js"></script>

HTML:

<ul class="grid" id="movie-grid">
<li class="movie">
  <div class="poster"></div>
  <h2 class="title"><a href="foo.html">Title</a></h2>
  <p class="desc">TV Movie</p>
</li>
</ul>

和CSS:

    .poster {
 /*background:url(../images/comingsoon.jpg) no-repeat left top;*/
 background-image:url(../images/comingsoon.jpg);
 background-repeat:no-repeat;
 background-position:left top;
 display:block;
 width:204px;
 height:137px;
 background-size:100%;

 }

最佳答案

问题是您正在尝试使用retina.js更改CSS中的图像。我相信标准的retina.js功能可让您像这样在HTML代码中更改/交换图像:

<header>
   <img src="/images/logo.png">
</header>

会变成

<header>
   <img src="/images/[email protected]">
</header>

为了使retina.js交换出样式表中的图像，您需要下载retina.js网站提供的LESS CSS Mixin。然后按照他们概述的步骤进行操作:

语法: .at2x(@path, [optional] @width: auto, [optional] @height: auto);
步骤:

将.at2x()中的retina.less mixin添加到您的LESS样式表中

在样式表中，在任何地方调用.at2x() mixin而不是使用background-image

将编译为:



资料来源:

http://imulus.github.io/retinajs/

http://www.awwwards.com/coding-for-retina-displays-with-retinajs-tutorial.html

关于javascript - retina.js无法正常工作-不知道为什么，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24213402/