@media screen css属性没有响应？

Question

我的@media屏幕和（max-device-width：640px）似乎没有响应。

我也放了

<link rel="stylesheet" type="text/css" href="css/mobile.css"/>

和

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

在我的Index.html中。

我只在我的mobile.css中有这个：

 @media screen and (max-device-width: 640px)
 {
 #navbar {
     height: 11%;   
     }
 }

我想念什么？我在Dreamweaver cs4中工作。

Answer 1

max-device-width和/或min-device-width需要实际设备才能生效，以便在您需要使用的桌面上调试代码：

@media screen and (max-width: 640px) {

  #navbar {
    height: 11%;    
  }

}

Answer 2

尝试Device Emulator in Chrome Browser，

如果你开发移动设备，但没有人可以测试， 它提供现有设备的预设（iPhone，HTC，Google ......），并允许编辑分辨率，方向等。

Answer 3

＆＃39;我想这......

 #navbar {
     height: 11%;   
     max-height:11%;
     }

因此它永远不会扭转最大高度