移动优化此代码

Question

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

我已尝试在 initial-scale 上添加更多内容，但是否有更好的方法在移动设备上解决此问题？如您所见，我使用了 div 而不是在 body 上使用 background-property。我这样做只是为了它。

目前我已将 initial-cale 设置为 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%;
            }
        }

Answer 1

你应该使用 media queries.

@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表示phone视图。此外，大屏幕/桌面为992px，超大屏幕/宽桌面为1200px。

移动优化此代码

Mobile optimize this code

css

absolute