使按钮的大小根据屏幕大小使用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; 
} 
}