0

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

/*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。然而，尽管在我的 2 个模拟器上进行了测试，每个模拟器的大小分别为 1024px 和 480px。两个模拟器的主页按钮高度为 700 像素。

我还添加了最重要的内容

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

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

4

1 回答 1

1 
**UPDATE**

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

http://jsfiddle.net/arunberti/jNZEL/

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

希望这可以帮助你

  @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 */ }

也使用元标记

于 2013-07-24T09:26:08.200 回答