图像的媒体查询无法正常工作

Question

在我的项目中，如果屏幕尺寸达到一定宽度，我想移动我的图像。目前，图像处于静止状态，我不确定为什么。

这是我的代码：

 <div style="height: 630px; width: 350px;" class="formContainer" >

CSS:

 @media screen and (max-width: 1332px) {
     .formContainer {
         left: 100;
         top: 40px;
     }
}

然而，如果我将左属性设置为 0，div 会移动，但是我不想将 div 移动那么远。有人知道这个问题吗？

Answer 1

这段代码可以为您指明正确的方向：

.formContainer {
  position: relative;  // position is 'static' by default
  left: 100px;  // you missed unit here (was 'left: 100')
  top: 40px;
}

首先，您没有为 left 属性指定单位。当你使用值0时，单位确实可以省略，因为任何单位的零仍然只是一个零。如果您使用非零值，例如 100，则需要指定单位，因为现在无论是 100px 还是 100rem.

都会有所不同

其次，位置默认为static。 left 和 top 对静态定位元素没有任何影响。对于您的用例，我认为 relative 位置更合适。

Media Query for an image not working correctly