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。但是，最大宽度为320像素的手机的高度为55像素（实际上，最大宽度为375像素）。

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

Answer 2

媒体查询的顺序在CSS中很重要！检查此处以了解更多信息。

这意味着，如果将两个规则碰撞到同一元素，它将选择最后声明的一条规则，除非第一个规则带有!important标记或更具体（例如html> body）与仅身体相比，后者则不太具体。

Answer 3

我认为您需要花点时间来分析您的代码在做什么。

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

这是如果浏览器窗口大小最大为320px，然后在块中应用样式

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

这将样式应用于最大宽度为375px的窗口屏幕。这里的问题是，如果屏幕宽度为320像素，则它不大于375像素，因此，将应用媒体查询中的两种样式，并按解析顺序覆盖现有样式。如果您希望某些样式专门用于大于320像素但小于375像素的屏幕，则可以使用

@media only screen and (min-width: 320px) and (max-width: 375px)

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

3 个答案: