Question

不幸的是，如果我在较小的设备上打开网站或调整浏览器窗口大小，标题总是会滑落：

代码的受影响部分是：

<div class="header-content">

<?php

require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

if ($detect->isMobile() ) {

        echo '<div class="header-content-inner" style="margin-top:-17%;">';

} else {

        echo '<div class="header-content-inner" style="margin-top:17%;">';

}

?>

<h1 id="homeHeading">What will shape the future?<br>Let's find out.</h1>

任何人都可以给我一个暗示吗？我不明白为什么浏览器没有正确计算百分比的像素... 感谢您的支持：）

Answer 1

由于header .header-content上设置的绝对位置，标题会滑落。另外，删除margin-top

上的.header-content-inner

删除它：

@media (min-width: 768px)
header .header-content {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0 50px;
}

响应式投资组合的标题并不正确

1 个答案: