媒体查询无法正常工作

Question

我一直在尝试编写一些简单的媒体查询，但刚开始就卡住了。媒体查询似乎只适用于文本，不适用于 div 和图像。这是我的 css 代码以及 html.

 @media (max-width: 720px) {
   .logo {
     margin-top: 30px;
     margin-bottom: 20px;
     width: 100%;
   }
   <!-- only this piece of query works --> .text {
     border-bottom: 2px solid red;
   }
   .gif {
     clear: right;
   }
 }
 body {
   background-image: url('website/resources/images/body.png')
 }
 .logo_container {
   width: 700px;
   height: auto;
   margin-top: 60px;
   margin-bottom: 40px;
 }
 #logo {
   width: 100%;
   height: auto;
 }
 .text {
   font-size: 30px;
   margin-bottom: 60px;
 }
 .gif {
   float: right;
 }

<center>
  <div class="logo_container">
    <img id="logo" src="logo.png"></img>
  </div>
  <div class="text">some text ...</div>
  <div class="gif">
    <img src="under_construction.gif"></img>
  </div>
</center>

根据此代码，图像应在 window 大小低于 720px 后立即拉伸至 window 宽度的 100%，并且浮动到文本左侧的 gif 应清除其浮动并继续在图像下。但是什么也没有发生，除了文本有一个红色边框。

我尝试了一些不同格式的媒体查询，@media () {}、@media screen () {}、@media only screen () {}、@media screen and () {}、@media only screen and () {} 但是 none 这些似乎适用于图像和 div。

这是我的全部代码：

http://pastebin.com/0bvUrZnU

Answer 1

在您的桌面代码中，您将徽标定位为 id #logo，而在您的媒体查询中，您将其定位为 class .logo

Answer 2

它按预期工作，但您的 media 查询中的代码存在一些问题。您将其称为 class 而不是 id

@media (max-width: 720px) {
    /*this is id but you just referred it with .logo which isn't present*/
    #logo {
        margin-top: 30px;
        margin-bottom: 20px;
        width: 100%;
    }

    /*only this piece of query works*/
    .text {
        border-bottom: 2px solid red;
    }

    .gif {
        clear: right;
    }
}

Answer 3

好的，所以你的媒体查询不是很好。

首先让我们将媒体更改为：@media handheld,screen and (max-width: 720px)

这将允许您的查询通过 DPI 更改和分辨率更改全面读取，它甚至可以在 iframe 和伪装框和模拟器等基本上都可以使用。

现在，根据经验，您的媒体查询应该位于样式的底部 sheet。我们这样做是因为样式 sheet 是从上到下读取的，因此所有覆盖样式都应位于原始样式规则的下方。

所以你想要这个 :

您在 text 之前缺少 .，并且在取消 float 时也使用 float:none;。

我也用 <img> 标签整理了你的 html ，总是定义 height 和 width 标签本身，就像这样 <img width="300" height="100" /> 然后使用 css 覆盖它。这是为了让浏览器可以更快地渲染图像，因为它知道它的比例并且你应该在所有方面都有一个 alt 属性。最后，图像不是包装器，它们不需要以 </img> 结尾，而是像这样完成所有操作：<img width="300" height="100" alt="iam an image and if i wanted to be responsive i should have max-width:100%; height:auto; as my CSS rule." />

body {
  background-image: url('website/resources/images/body.png')
}
.logo_container {
  width: 700px;
  height: auto;
  margin-top: 60px;
  margin-bottom: 40px;
}
#logo {
  width: 100%;
  height: auto;
}
.text {
  font-size: 30px;
  margin-bottom: 60px;
}
.gif {
  float: right;
}
@media handheld,
screen and (max-width: 720px) {
  #logo {
    margin-top: 30px;
    margin-bottom: 20px;
    width: 100%;
  }
  .text {
    border-bottom: 2px solid red;
  }
  .gif {
    float:none;
  }
}

<center>
  <div class="logo_container">
    <img id="logo" src="logo.png" alt="all images should have alts and use width and height" />
  </div>

  <div class="text">some text ...</div>

  <div class="gif">
    <img src="under_construction.gif" alt="all images should have alts and use width and height" />
  </div>
</center>

Answer 4

在 css 建议删除 lint 后，我遇到了同样的问题 * { 保证金：0；填充：0；

我替换了它，媒体查询又工作了。

Answer 5

我遇到的媒体查询未按预期工作的大多数问题都是由于它们出现的顺序所致。有时它们会意外地乱序，尤其是从最小值变为最大值或从最小值变为最大值时。

使用 max-width 时，请检查以确保所有查询的宽度从最大到最小显示（1200 像素，然后是 992 像素，等等）。

使用 min-width 时，请检查以确保所有查询的宽度从最小到最大（576 像素，然后是 768 像素等）。

媒体查询无法正常工作

Media Queries not working properly

html

css

media-queries