@media screen CSS属性没有响应？

Question

我的@media屏幕和（最大设备宽度：640像素）似乎没有响应。 我也把

<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

在Chrome浏览器中尝试设备模拟器 ，

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

Answer 3

我觉得这个...

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

所以它永远不会改变最大高度