![](/img/trans.png)
[英]How to get @media(max-width 425px) to work alone, and not follow @media(max-width 768px)
[英]Stylus: @media screen and (max-width: 425px) prevents stylus from creating css
我刚刚开始用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
您有缩进错误。
&.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进行媒体查询
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.