html - 如何使用CSS解决自适应设计问题

我正在创建一个响应式登录页面。我在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。但是，最大宽度为320像素的手机的高度为55像素（实际上，最大宽度为375像素）。

最佳答案

正确的顺序应如下所示：

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