@media在手写笔中不起作用

Question

屏幕尺寸过小时，我不想显示图像。 在这里，我使用@media执行此任务。 该图像的ID为mpImage

#mpImage
  padding-top: 40

  @media (min-width: 480)
    display: none

但是它没有任何回应。

更多信息：index.jade：

head
    meta(name='viewport', content='width=device-width')
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    .carousel
        img#mpImage(src="/images/mainP1.gif")
        .carousel-caption
            h1 Title

style.styl：

.carousel
  height: 500
  background-color: #888
#mpImage
  padding-top: 50
  @media screen and (max-width: 480)
    display: none

Answer 1

您必须使用某种类型的单位。 不是JavaScript。

https://codepen.io/sheriffderek/pen/38a098554612f43cdda74d2a5e595f0a

有趣的是，这是使用带变量的媒体查询的方式

$break-point-1 = '(min-width: 600px)'

html
    background: red
    @media $break-point-1
        background: blue
    @media (min-width: 1000px)
        background: green
    @media (min-width: 1400px)
        background: lightgreen

Answer 2

尝试这种方式：

.carousel
  height: 500
  background-color: #888
#mpImage
  padding-top: 50
@media screen and (max-width: 480)
  #mpImage
     display: none

最小宽度：480内的样式仅在您的屏幕大于480px时适用；最大宽度：480则适用于小于480px的屏幕