Question

我试图允许我的网页对媒体查询属性作出相应的反应。我在网上搜索过，发现了这个通用元代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

在我的CSS中我相应地改变了

@media only screen and (max-device-width: 720px) {

#homebutton input[type=image] {
   position:absolute;
   left:0%;
   top:0%;
   margin: 0px;
   height:700px;
}

我在不同的移动界面上的Opera移动模拟器上尝试过它

WXGA Landscape 1280x800
HD Potrait 720x1280

但是我的家庭按钮仍然保持与原来的大小相同

#homebutton input[type=image] {
  position:absolute;
  left:0%;
  top:0%;
  margin: 0px;
  height:70px;
}

Answer 1

如果您的700px规则（在@media区块中）高于70px规则，而后者适用于任何@media区块之外，则会覆盖您的所有媒体的700px规则。

为了让@media块覆盖一般规则，您需要在样式表中将其移到它下面。

请参阅我对this question的回答以获得解释。

Answer 2

您也可以尝试搜索自适应布局，我建议使用宽度元素定位所有设备，所以请尝试使用：

@media (max-width: 720px) {
  #homebutton input[type=image] {
    height:700px;
  }
}

除非您想要更改元素的某些属性，否则您无需在媒体查询中指定它。

为什么我的webapp无法检测到媒体查询属性？

2 个答案: