根据屏幕大小更改 CSS

Posted 2023-03-06

【中文标题】根据屏幕大小更改 CSS

【英文标题】：Change CSS based on screen size

【发布时间】：2020-09-04 20:09:44

【问题描述】：

我有一个页面“create.php”，在具有正常宽度和高度的计算机上看起来不错：

当我调整页面最小宽度时，它可以去：

当我在移动设备（三星 Galaxy S9）上运行时：

这是我的 CSS 代码：

            img 
              margin-left: 30px;
              margin-top: 15px;
            

            .input 
              margin-bottom: 50;
              position: absolute;
              top: 160%;
              left: 50%;
              transform: translate(-50%, -50%);
              border: 1px solid grey;
              border-radius: 35px;
              padding-left: 25px;
              padding-right: 25px;
              padding-top: 35px;
              padding-bottom: 25px;
            

这里是input div

<div class="input">
        <h1>Create a quiz game!</h1>
        <form action="create.php" method="post">
<!-- A big form -->
</form>
</div>

基本上，我想更改 CSS 以使所有间隙都正常。有谁知道如何做到这一点？

我已尝试更改我的表单以使其更好地工作，但它向上移动的问题有时仍然有效...

媒体查询很好，但是对于很多屏幕尺寸手动执行非常耗时..

有没有像 bootstrap 这样的 CSS 库可以让它变得更好... 也许我必须使用容器 div？

【问题讨论】：

您应该为此使用媒体查询。使用所有这些代码，很难告诉您这样做。如果您编辑代码并将其用作代码 sn-p，我们可以为您提供更多帮助。

@CanUver 好的！ thx 会做的

【参考方案1】：

手机编码可能很棘手，因为有很多不同的比例和分辨率，但我建议尝试这个https://***.com/a/13550716/10816600，如果这对你不起作用，你可以将手机用户重定向到你已经工作的另一个页面用于手机。

https://css-tricks.com/snippets/javascript/redirect-mobile-devices/

【参考方案2】：

您需要使用Media Query 查看此link 了解更多信息

【参考方案3】：

使用 css3 的 vw 视口单元。 我推荐这个article