0

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

编写更少的mixin的最佳方法是什么，以便我可以将一组图标提供给桌面，将另一组图标提供给普通平板电脑，将2X的图标提供给基于视网膜的图标？

现在，我正在尝试使用以下代码段，但这个代码段无法处理正常的平板电脑查询。媒体查询中不能使用小于、大于符号，否则很容易为 device-pixel-ratio: 2 编写一个 mixin，为 device-pixel-ratio < 2 编写另一个 mixin。

我尝试使用 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

4

0 回答 0