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

为了好玩，以下是如何使用带有变量的媒体查询

Roll

Answer 2

尝试这种方式：

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

最小宽度：480内的样式仅适用于屏幕大于480像素的情况，最大宽度：480适用于小于480像素的屏幕

@media无法在手写笔中使用

2 个答案: