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

Question

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

这是我的代码:

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

CSS:

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

但是，如果我将 left 属性设置为 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 位置更合适。