Question

关于在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
    }
}

Answer 1

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

Gumby SCSS框架 - 使用视网膜背景图像的响应

1 个答案: