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

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%;
    }
}

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