Html 为什么我的网页只在响应设计视图中响应，而不在浏览器中响应？

我正在使用响应式设计视图工具测试我的网页，一切正常（窗口响应良好）

当我尝试在Chrome、IE甚至Mozilla上做同样的事情时，什么都没有发生——页面变得没有响应。你知道为什么会这样吗

CSS：

@media screen and (min-device-width : 480px) and (max-device-width :  768px) {

  .main_container {
    width: 100%;
    font-size: 16px;
    line-height: 22px;
  }

  #header {
    height: 200px;
    background-color: tomato;
  }

  #stanga {
    width: 70%;
    float: left;
    background-color: green;
  }

  .dreapta {
    width: 30%;
    float: left;
    background-color: red;
  }

  footer {
    height: 150px;
    width: 100%;
    background-color: black;
    clear: both;
  }
} 

@media screen and (min-device-width : 767px) and (max-device-width :  1200px) {

  .main_container {
    width: 800px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 22px;
  }

  #header {
    height: 200px;
    background-color: tomato;
  }

  #stanga {
    width: 650px;
    float: left;
    background-color: green;
  }

  .dreapta {
    width: 150px;
    float: left;
    background-color: red;
  }

  footer {
    height: 150px;
    width: 800px;
    background-color: black;
    clear: both;
  }
}


@media only screen and (min-device-width : 1200px) {

  .main_container {
    width: 900px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 22px;
  }

  #stanga {
    width: 70%;
    float: left;
    background-color: green;
  }

  .dreapta {
    width: 30%;
    float: left;
    background-color: red;
  }

  footer {
    height: 150px;
    width: 900px;
    background-color: black;
    clear: both;
  }
}

---

最小宽度和最小设备宽度之间存在差异。使用桌面的最小宽度

“最小设备宽度”设置是指设备的宽度。“min width”属性指的是浏览器的宽度

@media screen and (min-width : 767px) and (max-width :  1200px)

注意：看起来在768px和480px都有碰撞发生。我认为这是无意的，所以您可能也想修复它

我编辑了你的小提琴

---

您的代码在哪里？我的代码中到底有什么可以让您理解问题（这样我就知道该发布什么）？它相当长。创建一个来向我们展示问题。撇开“设计”不谈：是的，现在它正在工作，非常感谢您的帮助。我仍然试图从基本的例子开始理解这些媒体查询。你能告诉我“碰撞发生在768px和480px”是什么意思吗？这意味着有内容被覆盖，不是吗？如果一个媒体查询的最小值为480，另一个媒体查询的最大值为480，则在480时，两个媒体查询都将触发。匹配的最后一个媒体查询可能会覆盖以前媒体查询中的某些内容。这可能有问题，也可能没有问题。