html - 如何使用 css 修复响应式设计问题

Question

我正在创建响应式着陆页。我在 CSS 中提到了针对不同屏幕尺寸的不同设置。我提到了 3 种屏幕尺寸，即最大宽度 320、最大宽度 375 和最大宽度 780。但是屏幕宽度为 320 的手机正在从 css 中获取屏幕宽度 375px 的属性。

<style>
@media only screen and (max-width: 320px)
{
div.auto-style16 {
height: 95px;
padding-top: 10px;
}
}


@media only screen and (max-width: 375px)
{
div.auto-style16 {
height: 55px;
padding-top: 0px;
}
}


@media only screen and (max-width: 780px)
{
div.auto-style16 {
height: 5px;
padding-top: 30px;
}
}
</style>

根据上面的代码，最大宽度为 320px 的手机应该采用 95px 的高度。同样，最大宽度为 375px 的手机的高度应为 55px。然而，最大宽度为 320px 的手机的高度为 55px(实际上最大宽度为 375px)。

Answer 1

正确的顺序应该是这样的:

@media only screen and (max-width: 780px) {
  div.auto-style16 {
    height: 5px;
    padding-top: 30px;
  }
}

@media only screen and (max-width: 375px) {
  div.auto-style16 {
    height: 55px;
    padding-top: 0px;
  }
}

@media only screen and (max-width: 320px) {
  div.auto-style16 {
    height: 95px;
    padding-top: 10px;
  }
}