Css 移动优化此代码

所以我得到了这个代码，它在桌面上运行得很好，但在移动设备上它太小了

我试图在初始规模上增加更多，但有没有更好的方法在移动设备上解决这个问题？正如您所看到的，我在body上使用了divs而不是background属性。我这样做只是为了它

目前，我已将初始刻度设置为1

以下是CSS：

body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: 'Open Sans', sans-serif; 
            background-color: black;

        }
        .background {
            background-image: linear-gradient( rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8) ), url("image");
            height: 100%;
            background-position: center;
            background-repeat: no-repeat; 
            background-size: cover;
        }

         body > #container > .logo > img {
            position: absolute;
            width: 15%;
            height: auto;
            margin-left: 42%;
            margin-top: 5%;
        }

        #container > .text > h1 {
            position: absolute;
            width: 22%;
            height: auto;
            margin-left: 38%;
            margin-top: 18%;
            box-sizing: border-box;
            color: white;
            text-align: center;
            font-size: 2vw;
        }

        .supported > a > img {
            position: absolute;
            width: 15%;
            height: auto;
            margin-left: 41.2%;
            margin-top: 38%;
        }

        .supported-text {
            position: absolute;
            width: 22%;
            height: auto;
            margin-left: 38%;
            margin-top: 35%;
            box-sizing: border-box;
            color: white;
            text-align: center;
            font-size: 2vw;
            font-weight: 600;
        }

谢谢你的帮助

解决方案：

@media screen and (max-width: 768px) {
            body > #container > .logo > img {
                width: 25%;
                margin-left: 36%;
            }

            #container > .text > h1 {
                margin-top: 28%;
                font-size: 6vw;
                width: 55%;
                margin-left: 22%;
            }

            .supported-text {
                font-size: 5vw;
                width: 35%;
                margin-top: 72%;
                margin-left: 32%;
            }

            .supported > a > img {
                width: 28%;
                margin-top: 80%;
                margin-left: 35%;
            }
        }

---

您应该使用

媒体查询

@media (max-width: 768px) {
    // Change your websites values. For example, if you wish that some text will be larger, give him a new font-size attribute.
}

---

请注意，768px表示电话视图。此外，大屏幕/桌面是992px，超大屏幕/宽桌面是1200px。

谢谢，但在这段代码中我使用了基本css。我之前看过引导，但还没有开始使用它。使用媒体查询不需要引导。您可以在没有任何框架的情况下使用媒体查询。是的，使用它不需要引导。然而，使用boostrap将更容易优化您的网站，使其成为移动视图。呵呵，我知道！我的观点是，他给了我一个媒体提问，没有解释如何使它友好！我明白了，WebR，我下次开发东西时会考虑这个问题。：）@未知您了解如何使用媒体查询吗？您只需要为其上的项目创建一个新属性。