@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

试试这个方法：

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

min-width: 480 中的样式仅适用于大于 480px 的屏幕，max-width: 480 将适用于小于 480px 的屏幕

Answer 2

你必须使用某种类型的单位。不是 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

@media 在手写笔中不起作用

@media doesn't work in stylus

css

stylus