Question

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

/*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及以下，家庭按钮大小将扩大到700px。然而，尽管在我的2个模拟器上进行了测试，每个模型的大小为1024px和480px。两个仿真器的主页按钮都高达700px。

我还添加了最重要的内容

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

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

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

也使用元标记

按钮大小不会根据宽度大小而改变

1 个答案: