使用jquery/javascript根据屏幕大小调整按钮大小

Question

我想根据屏幕大小调整按钮控件的大小，就像它们在其他移动设备（iPhones和iPads）上也可以自行调整一样。这怎么可能？

Answer 1

Css3具有媒体查询，允许您创建特定于屏幕的样式。这在旧的IE中并没有得到很好的支持，这就是为什么你总是必须定义一个法线。级联效应仍然有效，您不需要在媒体查询中从正常情况重新定义属性（例如，在所有场景中背景都是绿色的）

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