手寫筆：@media屏幕和（最大寬度：425px）可防止手寫筆創建CSS

Question

我剛剛開始用Stylus編碼CSS，但遇到了一個問題。

我想根據最大寬度更改CSS。 為此，我使用@media屏幕和（最大寬度：xyzpx）。 通常對我來說很好。 在我的style.styl文件中，我多次使用以上內容，但是當我輸入最后一個文件時，瀏覽器只會打開純HTML文件，而根本不使用.styl文件。

這是我的代碼：

@media screen and (max-width: 425px)
  header 
    height 110px
    background-image url(/images/banner_425.jpg)
    a
        &.logo
        height 36px 
        background rgba(0,0,0,.65) url(/images/logo_small.svg) no-repeat center center
        background-size 126px 17px 

    .hero 
        width 100% 
        left 0 
        top 46px 
        text-align center 

        h1 
            font-size 1em
            margin-bottom 10px 

        a
            &.btn 
                padding 2px 30px 
                font-size .8em
                span 
                    display none 

Answer 1

您有縮進錯誤。

    &.logo
    height 36px 
    background rgba(0,0,0,.65) url(/images/logo_small.svg) no-repeat center center
    background-size 126px 17px

應該：

&.logo
    height 36px 
    background rgba(0,0,0,.65) url(/images/logo_small.svg) no-repeat center center
    background-size 126px 17px

但總的來說，我強烈建議您在Stylus中使用Rupture進行媒體查詢