手写笔：@media screen and (max-width: 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 进行媒体查询

手写笔：@media screen and (max-width: 425px) 阻止手写笔创建 css

Stylus: @media screen and (max-width: 425px) prevents stylus from creating css

html

css

stylus