小编Kat*_*MCM的帖子

我正在研究我的响应式设计。这就是我的 @media 断点：

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

  #section {
    padding: 0px;
    padding-top:100px;
  }
  .text {
    text-align: center;
    padding-left: 50px;
    width:350px; 
  }
  .headline{
    height: 50px;
    width: 350px;
    text-align: center;

  }
  .header {
    padding-top: 200px;
    background-color: lightgrey;
  }
  .w-70 {
    width: 20%;
    background-color: blue;
  }
  .w-15 {
    width: 40%;
  }
}

@media (max-width: 1100px) and (min-width: 801px) {
.header {
    height:350px;
    background-color: red;
    font-size: 2em;
  }
.w-70 {
    display: none;
  }
  .w-15 {
    width: 40%;
  }
}

当我手动调整浏览器大小以测试 Chrome 中的响应能力时，一切正常并且断点相对应。当我使用Chrome Inspection工具中的“响应式”功能进行测试时，第一个断点： …