Question

底部不断在移动视图中被削减，但在浏览器中完全没问题，即使它已经调整大小。我想也许媒体查询没有被解决，但它们看起来很好。我已经尝试通过放置.square来移动top:-55%;，但它只会在桌面浏览器中移动。由于某种原因，它不会在移动设备中移动。

     <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

我认为因为视口高度不够大而被切断了。由于您使用.project_miniwrap定位top:35%;，因此它始终将其定位在距离父级顶部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;
}

移动浏览器会切断内容底部，但可以在桌面浏览器中使用

1 个答案: