[英]Stylus: @media screen and (max-width: 425px) prevents stylus from creating css
I've just started coding my CSS with Stylus and I've got one problem. 我刚刚开始用Stylus编码CSS,但遇到了一个问题。
I'd like to change my CSS depending on the max-width. 我想根据最大宽度更改CSS。 For this I use @media screen and (max-width: xyzpx).
为此,我使用@media屏幕和(最大宽度:xyzpx)。 Which normally works fine for me.
通常对我来说很好。 In my style.styl file I use the above multiple times, but when I enter my the last one, the browser just opens the plain html file and does not use the .styl file at all.
在我的style.styl文件中,我多次使用以上内容,但是当我输入最后一个文件时,浏览器只会打开纯HTML文件,而根本不使用.styl文件。
Here is my code: 这是我的代码:
@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
You have an indentation error. 您有缩进错误。
&.logo
height 36px
background rgba(0,0,0,.65) url(/images/logo_small.svg) no-repeat center center
background-size 126px 17px
Should be: 应该:
&.logo
height 36px
background rgba(0,0,0,.65) url(/images/logo_small.svg) no-repeat center center
background-size 126px 17px
But in general I would strongly recommend using Rupture for media queries in Stylus 但总的来说,我强烈建议您在Stylus中使用Rupture进行媒体查询
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.