Question

所以我得到的这个代码在桌面上很棒，但在移动设备上它很小。

我尝试在初始规模上添加更多内容，但是有更好的方法可以在移动设备上修复此问题吗？正如你所看到的，我已经使用了div而不是在body上使用background-property。我这样做只是为了它。

目前我已将初始陈设设为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意味着手机视图。此外，大屏幕/桌面是992px，超大屏幕/宽桌面是1200px。

Mobile优化此代码

1 个答案: