按鈕大小不會根據寬度大小更改

我試圖使用媒體查詢來使我的網站在平板電腦/智能手機上圖形更好。我環顧四周，找到了一個通過媒體寬度調整大小的常用語法。按鈕大小不會根據寬度大小更改

/*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？就像我在頂部指定的那個 –

從我上面的代碼中，我希望一旦檢測到的設備沒有達到最大寬度，主頁按鈕大小就會相應地變爲700px –

按鈕大小不會根據寬度大小更改

回答

相關問題