Css 按钮大小不随宽度大小而变化

我曾尝试使用media query使我的网站在平板电脑/智能手机上的图形效果更好。我环顾四周，发现了一种通过媒体宽度调整大小的通用语法

/*Media Query*/

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

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

根据我的理解，如果我的设备宽度为720px及以下，homebutton的大小将扩大到700px。然而，尽管在我的两个模拟器上进行了测试，每个模拟器的大小分别为1024px和480px。两个模拟器的homebutton的高度均为700px

我还补充了最重要的一点，那就是

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

这是我的名片。如果我犯了任何错误，请原谅，因为我不是JSFIDLE上的季节用户

**UPDATE**

检查JSFIDLE并将这些CSS添加到您的项目中，让我知道您的担忧

以下是网站中使用的标准媒体查询：

希望这对你有帮助

  @media screen and (max-width: 1024px) { ..styles go here }

@media only screen and (min-device-width: 768px) and (orientation: portrait),
screen and (max-width: 994px) { /* for tablets in portrait mode and desktops with less than 994px of horizontal browser width */ }

@media screen and (max-width: 555px),
screen and (max-device-width: 480px) { /* for desktops with less than 555px of horizontal browser width and devices with less than 480px wide (most phones in landscape orientation) */ }

@media screen and (max-width: 320px) { /* anything less than 320px (primarily phones in portrait */ }

也可以使用元标记

---

能否在JSFIDLE中向我们展示您的演示问题？请确保在html中包含此元标记：否则媒体查询将无法工作。这可能是你的问题，这是一个大按钮！我只是出于测试目的随机输入任何px：P不用担心。我的imagebutton尺寸不会那么大。如果我没有弄错的话，它和我的一样，如上所示。在进行更困难的操作之前，我只是在一个简单的图像上进行了尝试和测试。您只使用了一个媒体查询，还是使用了更大尺寸的tahn 720px的媒体查询？就像我在上面的代码中在顶部指定的一样，我希望一旦检测到的设备没有超过最大宽度，主页按钮的大小将相应地改变为700px，这是你的网站托管的。因此我们可以测试或一些示例代码…可能在jsfiddle中我在上面添加了一个jsfiddle。至于我如何测试我的项目，我已经在上面提到了。我在VS2012中开发了我的项目，并在opera mobile emulator中运行了我的项目。这个模拟器使我能够根据自己的喜好选择任何宽度。问候：）