移动媒体查询视网膜

Question

我对视网膜图像的媒体查询有点问题。

我有这个block.less：

.page-header {
  background: @bg-dark url("../images/bg-back-mobile.jpg") no-repeat center top;

  @media @retina {
    background-image: url("../images/bg-back-mobile@2x.jpg");
    background-size: 700px auto;
  }
}

@media @tablet-width {
  .page-header {
    background-image: url("../images/bg-back-tablet@1x.jpg");

    @media @retina {
      background-image: url("../images/bg-back-tablet@2x.jpg");
      background-size: 1200px auto;
    }
  }
}

@media @desktop-width {
  .page-header {
    background-image: url("../images/bg-back-desktop.jpg");
  }
}

和vars.less：

@tablet-width: ~"(min-width: 700px)";
@desktop-width: ~"(min-width: 1200px)";
@retina: ~"(min-resolution: 144dpi), (min-resolution: 1.5dppx)";

当我在移动设备上测试此背景图片时（宽度：320px，DPR：2.0），有下载url("../images/bg-back-tablet@2x.jpg")但不是url("../images/bg-back-mobile@2x.jpg")。

当我删除此部分时

@media @retina {
          background-image: url("../images/bg-back-tablet@2x.jpg");
          background-size: 1200px auto;
        }

它正常工作。

怎么了？