为什么我的网页只在响应式设计视图中有响应，而在浏览器中却没有？

Question

我正在使用响应式设计视图工具测试我的网页，一切正常（window 是响应式的）。

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

"min-device-width" 设置指的是设备的宽度。 "min-width" 属性指的是浏览器的宽度。

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

注意：您似乎确实在 768px 和 480px 处发生了碰撞。我认为这是无意的，所以您可能也想修复它。

我编辑了你的fiddle https://jsfiddle.net/8dt44c5b/

为什么我的网页只在响应式设计视图中有响应，而在浏览器中却没有？

Why is my Web page resposnive only in Responsive Design View but not in browser?

html

css

responsive-design