Question

我正在尝试对桌面/普通平板电脑/基于Retina的平板电脑使用单独的媒体查询。我有一套视觉设计和设计桌面图标，另一套平板电脑。

写一个less mixin的最佳方法是什么，这样我可以将一组图标添加到桌面，另一组设置为普通平板电脑，将2X设置为基于视网膜的图标？

现在，我正在尝试使用以下代码段，但这一个无法处理正常的平板电脑查询。小于，大于符号不能用于媒体查询，否则就可以很容易地为设备像素比率写入一个mixin：2而另一个用于设备像素比率＆lt; 2。

我尝试使用min-device-pixel-ratio：1，但随后，它也应用于桌面。我需要一个查询，它可以唯一地识别除视网膜以外的正常药片。桌面。这样写普通平板电脑是否正确？将断点设置在2以下，以便2及以上将采用基于视网膜的查询，1.9及以下将采用普通平板电脑。但是，此查询也适用于桌面？

@media
      only screen and (-webkit-max-device-pixel-ratio: 1.9),
      only screen and (   max--moz-device-pixel-ratio: 1.9),
      only screen and (     -o-max-device-pixel-ratio: 1.9),
      only screen and (        max-device-pixel-ratio: 1.9),

      {

现在查询我。

    .retina-image(@file-1x, @file-2x, @width-1x, @height-1x) {  
         background-image:~"url('@{imgPath}/@{file-1x}')";  
         width:@width-1x;
         height: @height-1x;      

  @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) 
  {     
      background-image:~"url('@{imgPath}/@{file-2x}')"; 
      background-size: @width-1x, @height-1x;       

  }
}

任何指针都会有很大的帮助！ TIA

少混合以区分台式/普通平板电脑/视网膜平板电脑

0 个答案: