css - @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

样式样式:

.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