Question

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

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

min-width和min-device-width之间存在差异。使用桌面的最小宽度。

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

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

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

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

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

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

1 个答案: