javascript - 使用 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

您可以通过以百分比设置宽度来调整它们的大小，以便它们根据屏幕大小调整大小，

.buttonclass
{
width:80%;
}

这应该工作..

如果你想使用像素，那么根据你需要支持的各种屏幕使用媒体查询，

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

Answer 3

好吧，您必须为此使用媒体查询：

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

Answer 4

对元素使用基于百分比的大小，以便它们自动缩放，或对特定窗口大小使用媒体查询，并相应地设置元素大小。

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