-4

关于在 Gumby 框架中使用响应 mixin 的非常具体的问题。

要使视网膜背景图像在 CSS 中正常工作，您需要使用响应 mixin ( http://gumbyframework.com/docs/mixins/#!/respond )，并传递 'min-device-pixel-ratio' 属性.

我不认为在 gumby 中做出响应是为了做到这一点，但也许这里有人尝试过？使用传统的媒体查询很容易，但我想尽可能使用框架挂钩，保持我的代码库简洁。

有什么见解吗？下面的代码示例 - 我认为这就是您在 SCSS 中格式化它的方式。

  //bg image + container
  .hero-background {
    background: url('../images/image.png') no-repeat bottom center;
    height: 100%;
    margin-top: -2em; 
    min-height: 53em;
    min-width: 100%;

    //for retina background images in Gumby, not sure if this works
    @include respond("min-device-pixel-ratio: 2") {
      background: url('../images/image.png') no-repeat bottom center; 
      background-size: 1429px 538px;
    }

这就是我得到的 CSS 输出

.hero-background {
    background:url(../images/GT_web_trucks_bwphoto.png) no-repeat bottom center;
    height:100%;
    margin-top:-2em;
    min-height:53em;
    min-width:100%
}

@media only screen and (min-device-pixel-ratio:2){
    .hero-background {
        background:url(../images/GT_web_trucks_bwphoto@2x.png) no-repeat bottom center;
        background-size:1429px 538px
    }
}
4

1 回答 1

-1

事实证明，是的，这是可能的，并且上述语法确实有效。

于 2014-03-20T20:57:14.377 回答