1

我试图让我的网页对媒体查询属性做出相应的反应。我在整个网络上搜索并找到了这个通用元代码

<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 移动模拟器上尝试过

  1. WXGA 风景 1280x800
  2. 高清肖像 720x1280

但是我的主页按钮仍然保持与原来一样的大小，如下所示

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

2 回答 2

3

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

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

请参阅我对这个问题的回答以获得解释。

于 2013-07-24T09:10:21.427 回答
0

您也可以尝试搜索响应式布局，我建议使用width元素定位所有设备，因此请尝试使用：

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

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

于 2013-07-24T09:14:01.233 回答