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>

根据此代码，在窗口大小低于720px之后，图像应该拉伸到窗口宽度的100％，浮动到文本左侧的gif应该清除其浮动并进入图像下方。但没有任何反应，除了文字有红色边框。

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

以下是我的全部代码：

http://pastebin.com/0bvUrZnU

Answer 1

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

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

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

现在，根据经验，您的媒体查询应位于样式表的底部。我们这样做是因为样式表是从上到下阅读的，所以所有重写样式都应该在原始样式规则的下面。

所以你想要这个：

您在.之前错过text，在取消float:none;时也使用float。

我还使用<img>标签稍微整理了你的html标签总是定义height和width标签本身就像<img width="300" height="100" />一样，然后用css来覆盖它。这样浏览器可以更快地渲染图像，因为它知道它的比例＆amp; s＆amp;你应该都有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." />

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

Answer 2

在您的桌面代码上

，您将徽标定位为ID #logo，并在媒体查询中将其定位为类.logo

Answer 3

它按预期工作，但您在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 4

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

我取而代之，媒体查询又重新开始了。

Answer 5

我遇到的媒体查询无法正常工作的大多数问题都是由于它们出现的顺序。有时它们会出乎意料地出现故障，特别是从最小值变为最大值时，反之亦然。

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

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

媒体查询无法正常工作

5 个答案: