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并相应地更改 500 像素及以下屏幕尺寸的表单样式。