使按鈕的大小根據屏幕大小使用jquery/javascript

Question

我想讓我的按鈕控件根據屏幕大小調整大小，就像他們應該在其他移動設備上調整自己一樣（iPhones和iPads）。怎麼可能？

Answer 1

Css3 has mediaqueries它允許你製作特定的屏幕樣式。這在舊版IE中並沒有得到很好的支持，這就是爲什麼你總是需要定義一個正常的。 級聯效應停留在影響，你不需要重新定義正常性的mediaqueries（例如，背景將是綠色的所有方案中的）

/*normal*/ 
button{ 
    width: 200px; 
    background: green; 
} 

@media only screen and (max-width: 600px) { 
    button{ 
     width: 150px; 
    } 
} 
@media only screen and (max-width: 480px) { 
    button{ 
     width: 100px; 
    } 
} 

---

這被稱爲響應式設計，設計對寬度做出響應。 IE瀏覽器將用於什麼也不做，但如果你使用的是Firefox，使瀏覽器的寬度小，它會自動跳到媒體風格

Answer 2

那麼你必須使用媒體查詢：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 3

在元素上使用基於百分比的大小，以便它們自動縮放，或者使用媒體查詢來查找特定的窗口大小，並相應地設置元素大小。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 4

你可以讓他們調整大小設置其百分比寬度，使他們根據屏幕大小調整，

.buttonclass 
{ 
width:80%; 
} 

這應該工作..

，如果你想要使用像素，然後根據您需要支持的各種屏幕利用媒體查詢，

@media screen and (max-width: 480px) and (min-width: 320px) { 
.buttonclass{ 
width:300px; 
} 
}