Question

我正在构建一个自适应网站但是当我调整窗口大小时，媒体查询与我的屏幕分辨率不对应，例如， @media屏幕和（最小宽度：640px）和（最大宽度：800px）导致这些设计元素出现在屏幕 800像素以上时我的 700像素由于某种原因，我的设计被设置为 @media screen and (min-width: 400px) and (max-width:640px) 。有谁知道为什么会发生这种情况？

Update: The max-width 640px media query is being set to my screen at over 700 pixels still. 

@media screen and (max-width: 1024px)  { 
.body{
    width:800px;
}

}

@media screen and (max-width: 800px) { 
    .body {
        width:600px;
    }

}

@media screen and (max-width:640px) { 
    .body {
        width:480px;
    }
}

@media screen and (max-width:400px) {

.body {
    width:260px;
}

}

Answer 1

要开始排除故障，请仔细检查文档头部中的

<meta name="viewport" content="width=device-width, initial-scale=1.0">

让我知道你是怎么过的。

修改

感谢额外的代码。查看this working example。 CSS和媒体查询的顺序如下：

/* set default  */
.body{
    width:800px;
  }

@media screen and (max-width:400px) {
  .body {
    width:260px;
  }
}

@media screen and (min-width: 401px) and (max-width:640px) { 
    .body {
      width:480px;
    }
}



@media screen and (min-width: 641px) and (max-width: 800px) { 
    .body {
       width:600px;
    }
}

@media screen and (min-width: 801px) and (max-width: 1024px)  { 
  .body{
    width:800px;
   }
}

媒体查询与网站上的像素无关

1 个答案: