html - 移动浏览器切断了内容的底部，但在桌面浏览器中工作

Question

底部在移动 View 中不断被截断，但即使在调整大小时在浏览器中也完全正常。我想也许媒体查询没有得到解决，但它们看起来不错。我尝试通过放置 top:-55%; 来移动 .square 但它只会在桌面浏览器中移动。由于某种原因，它不会在移动设备中移动。

     <meta name="viewport" content="initial-scale=1">

     /* Iphone */

     @media (min-width: 300px) and (max-width: 767px) {
        .project_miniwrap {
            min-width: 90%;
            top: 33%;
        }
        #tu {
            margin-top: 117px;
            margin-left: 235px
        }
        #dar {
            margin-top: 17px;
            margin-left: 25px
        }
        .square {
            color: #0D0D0D;
            font-family: 'NimbusSansNo5TOT-Medium';
            font-size: 38px;
            letter-spacing: -1px;
            display: block;
            margin: auto;
            position: absolute;
            top: -15%;
            left: 0;
            bottom: 0;
            right: 0;
            width: 295px;
            height: 160px
        }
        .l1,
        .l2,
        .l3,
        .l4 {
            position: absolute;
            background: transparent;
            width: 0px;
            height: 0px;
            background-color: black;
            color: #0D0D0D
        }
        .l1 {
            left: 0;
            bottom: 0;
            width: 8px
        }
        .l2 {
            top: 0;
            left: 0;
            height: 8px
        }
        .l3 {
            right: 0;
            top: 0;
            width: 8px
        }
        .l4 {
            bottom: 0;
            right: 0;
            height: 8px
        }
        .description {
            width: 90%
        }
        .snippet {
            display: block;
            width: 100%;
            line-height: 45px;
            margin-bottom: 10%;
            font-size: 36px
        }
        .main_description {
            display: block;
            width: 100%
        }
        #anchor-point {
            bottom: 90%;
            position: absolute
        }
        .anchor-point {
            bottom: 90%;
            position: absolute
        }
        #container {
            top: 30%
        }
    }
    @media (max-height: 479px) {
        #tu {
            margin-top: 117px;
            margin-left: 235px
        }
        #dar {
            margin-top: 17px;
            margin-left: 25px
        }
        .square {
            color: #0D0D0D;
            font-family: 'NimbusSansNo5TOT-Medium';
            font-size: 38px;
            letter-spacing: -1px;
            display: block;
            margin: auto;
            position: absolute;
            top: -15%;
            left: 0;
            bottom: 0;
            right: 0;
            width: 295px;
            height: 160px
        }
        .l1,
        .l2,
        .l3,
        .l4 {
            position: absolute;
            background: transparent;
            width: 0px;
            height: 0px;
            background-color: black;
            color: #0D0D0D
        }
        .l1 {
            left: 0;
            bottom: 0;
            width: 8px
        }
        .l2 {
            top: 0;
            left: 0;
            height: 8px
        }
        .l3 {
            right: 0;
            top: 0;
            width: 8px
        }
        .l4 {
            bottom: 0;
            right: 0;
            height: 8px
        }
    }

网站:http://imdarrien.com/

Answer 1

我认为它被切断是因为视口(viewport)高度不够大。由于您使用 top:35%; 定位 .project_miniwrap，它总是将它定位在距离父级顶部 35% 的位置，而不是在中心。

尝试使用它来使 div 居中:

.project_miniwrap {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

如果您知道宽度和高度，则可以使用上述版本的更兼容版本，否则您将需要使用 JavaScript 将其居中。

.project_miniwrap {
    top: 50%;
    left: 50%;
    width: 200px;
    height: 300px;
    margin-left: -100px;
    margin-right: -150px;
}