javascript - 如何使页面适合移动设备上的屏幕宽度？

Question

我有一个表单页面。我需要将此表单缩放并适合任何设备(Android、iOS 等)上的屏幕宽度。我怎样才能用 HTML 或 CSS 做到这一点？ style="width:100%" 不是我的解决方案。

谢谢!

Answer 1

为什么 width:100% 不是一个选项？

您可以像这样使用媒体查询来针对不同的屏幕尺寸:

form {
    width: 800px;
}

@media only screen and (max-width: 800px) {
    form {
        width: 100%;
    }
}

上面的代码将使 form 在任何宽度大于 800px 的屏幕上显示为 800px，如果它显示在等于或小于 800px 宽度的屏幕上，它将变为 100%。您可以根据需要使用其中的任意多个，例如，您可以在此之后为 max-width: 500px 添加另一个媒体查询，并针对 500px 及以下的屏幕尺寸相应地更改表单样式。