按钮大小不会根据宽度大小更改

我试图使用媒体查询来使我的网站在平板电脑/智能手机上图形更好。我环顾四周，找到了一个通过媒体宽度调整大小的常用语法。按钮大小不会根据宽度大小更改

/*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">

这里是我的jsfiddle最重要的事情。请原谅我，如果我做任何的错误，因为我不上的jsfiddle

来源

2013-07-24 Teo Chuen Wei Bryan

u能请为我们展示的jsfiddle您的演示问题？ – viki

确保你在html中包含这个元标记：否则媒体查询将不起作用。这可能是你的问题 – samrap

这是一个大按钮！ – Xareyo

**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-24 09:26:08

如果我没有弄错，就像上面显示的那样。我只是试着在一个简单的图像上测试它，然后再继续处理更困难的事情。 –

你只使用一个媒体查询，或者你正在使用媒体查询更大的塔恩720px？就像我在顶部指定的那个 –

按钮大小不会根据宽度大小更改

回答

相关问题