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

Question

我想让我的按钮控件可以根据屏幕尺寸调整大小，就像它们也应该在其他移动设备(iPhone 和 iPad)上自行调整一样。怎么样？可能吗？

Answer 1

Css3 has mediaqueries这使您可以制作特定于屏幕的样式。这在旧的 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 并缩小浏览器的宽度，它会自动跳转到媒体样式