Gumby SCSS框架 - 使用視網膜響應背景圖像

-3

關於在Gumby框架中使用響應mixin的非常具體的問題。Gumby SCSS框架 - 使用視網膜響應背景圖像

爲了讓視網膜背景圖像在CSS中正常工作，您需要使用響應混合（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/[email protected]) no-repeat bottom center; 
     background-size:1429px 538px 
    } 
}

來源

2014-02-21 staypuftman

生成的結果是什麼？ – cimmanon

我讓Gumby在一個Yeoman實例中運行，即時SCSS編譯 - 所以你馬上知道你是否搞砸了。奇怪的是，Gumby會編譯，但它只是跳過媒體查詢。 – staypuftman

「跳過」是不可能的，而不是根據響應mixin的來源：https：//github.com/GumbyFramework/Gumby/blob/master/sass/functions/_responsivity.scss – cimmanon

-1

事實證明，是的，這是可能的，上面的語法不工作。

來源

2014-03-20 20:57:14 staypuftman

Gumby SCSS框架 - 使用視網膜響應背景圖像

回答

相關問題