0

我正在使用当前的 Dreamweaver 来构建我的网站。我设置了设备预览以在我的 Iphone 11 promax 上查看它，但由于某种原因，我的手机上的对齐方式与我在 Chrome 浏览器中以相同的设备尺寸预览时不同。这是它在我的浏览器中的截图： 在此处输入图像描述

这是我手机上的样子： 在此处输入图片描述

我不确定您是否能够看到屏幕截图，因为我是该网站的新手，但我的代码片段如下。有谁知道为什么对齐方式如此不同以及我应该遵循哪一个？我的 h4 和 p 标签的电话对齐方式与 p 上方的 h4 正确对齐，但是当我在浏览器中查看时，h4 和 p 标签相互重叠。非常感谢您的帮助！

<div class="hm-onlkr"></div>
<div class="onlkr-info">
    <img src="imgs/onlooker.png" alt="Onlooker image" class="onlkr-img">
       <h4>The Onlooker</h4>
       <p class="onlkr-text">Getting out there and being the change you want to see in the world is what we live by.  From volunteering for local charities, becoming a mentor or simply just making someone smile is what doing your own good means.  Now go do your own good today!</p>
</div>

.hm-onlkr {
    position: relative;
    display: flex;
    width: 100%;
    height: 700px;
    background-color: #161616;
    transform: skewY(5deg) translateY(200px);
    box-shadow: 1px 0.5px 15px 0px rgba(22, 22, 22, 0.5);
}

.onlkr-info {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 75%;
    transform: translateY(-440px);
}

.onlkr-img {
    grid-row: span 2;
    width: auto;
    height: 500px;
}

h4 {
    position: relative;
    font-family: 'bleeding cowboys';
    font-size: 40px;
    color: #d6d6d6;  
    margin: 160px 0 0 40px;
}

.onlkr-text {
    grid-column: 2;
    grid-row: 2;
    height: auto;
    color: #d6d6d6;
    margin: 0 0 160px 40px;
}


@media (max-width: 875px) {
.onlkr-info {
        display: flex;
    }
    
    .onlkr-img {
        position: absolute;
        margin-top: 180px;
    }
    
    h4 {
        position: relative;
        margin: 150px auto 0;
    }
    
    .onlkr-text {
        position: absolute;
        margin: 210px 0 0 0;
        width: 100%;
    }
}
4

0 回答 0