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

Question

我正在使用Responsive Design View工具测试我的网页，一切都很好（窗口是响应的）。

当我尝试在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;
  }
}

Answer 1

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

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

"最小设备宽度"设置是指设备的宽度。"最小宽度"属性指的是浏览器的宽度。

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

注意：看起来在768px和480px的时候确实发生了冲突。我认为这是无意的，所以你可能也想解决这个问题。

我编辑了你的小提琴https://jsfiddle.net/8dt44c5b/