高度媒体查询将应用于所有

Question

.im {
  margin-top: 300px;
}

@media screen 
  and (min-height: 600px) 
  and (max-height: 800px) {
    .im {
      margin-top: 228px;
    }
}

<h1>Title</h1>
<figure class="im"><img src="a.jpg"></figure>

在上述代码中，将228 px的边距应用于1080p分辨率。我要实现的目标是，应在600px至800px的高度边距顶部使用228，而在800px以上的高度分辨率的边距顶部应使用300px。

Answer 1

怎么样

@media only screen and (min-width: 600px) {
  .im {
    margin-top: 228px;
  }
}

@media only screen and (min-width: 800px) {
  .im {
    margin-top: 300px;
  }
}

如果屏幕的宽度至少为600像素，则会应用228像素的边距顶部。如果屏幕至少有800像素宽，就好像您一个接一个地写了这两个字，这意味着后者将被应用