如何解决我应该在我的手机上遵循 Dreamweavers 设备预览布局还是在相同的屏幕尺寸下使用 Chromes 预览,因为它们看起来非常不同?
我正在使用当前的 Dreamweaver 来构建我的网站。我已将设备预览设置为在我的 Iphone 11 promax 上查看它,但由于某种原因,当我在 Chrome 浏览器中以相同的设备尺寸预览它时,我的手机上的对齐方式有所不同。这是它在我的浏览器中的样子的屏幕截图: enter image description here
这是我手机上的样子: enter image description here
我不确定您是否能够看到屏幕截图,因为我是这个网站的新手,但我的代码片段如下。有谁知道为什么对齐如此不同,我应该遵循哪一个?我的 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,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%;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。