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

How to make the page to fit screen width on mobile device?

本文关键字：屏幕 何使页 移动      更新时间：2023-09-26

>我有一个表单页面。我需要缩放此表单并适合任何设备（Android，iOS，...）上的屏幕宽度。如何使用 HTML 或 CSS 做到这一点？ 就我而言，style="width:100%"不是解决方案。

谢谢！

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

您可以使用媒体查询来定位不同的屏幕尺寸，如下所示：

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

上面的代码将使form宽度大于 800 像素的任何屏幕上宽 800px，如果它显示在等于或小于 800px 宽的屏幕上，它将是 100%。 您可以根据需要使用任意数量的这些内容，因此例如，您可以在此查询之后放置另一个媒体查询以进行max-width: 500px，并相应地更改屏幕尺寸为500px及以下的表单样式。

相关文章：