我正在尝试制作一个响应式网站。我正在尝试，如果分辨率发生变化，我的文本将保留在我的照片下方。(例如，如果有人调整其 Web 浏览器的大小。我的第一个问题，如果格式错误，我道歉。感谢您抽出宝贵时间阅读和提供帮助！(请注意，如果需要所有代码，我只添加了针对此问题的 HTML 和 CSS，我可以发布 GitHub 链接。
.HTML：
<body>
<div class="Mid">
<div id="TopLeft">
Daniel Apacik
</div>
<div id="Selfie">
<img src="images/me.jpg" alt="Photo of Daniel Apacik">
</div>
<div id="About">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto pariatur atque excepturi id vero voluptatibus iste commodi. Necessitatibus atque illo itaque officia exercitationem maiores culpa molestiae ipsa. Voluptates, iste magni.
</div>
<div id="TopRight">
Projects | Contact
</div>
</div>
</body>
.CSS：
.Mid {
background: url(images/midback2.png) center;
background-size: cover;
color: rgb(255, 255, 255);
width: 100%;
height: 100%;
min-width: 1000px;
min-height: 1000px;
font-size: 16px;
height: 2em;
padding: 0%;
margin: 0%;
min-height: 100vh;
min-width: 100vw;
}
.Mid #TopLeft{
position: absolute;
top: 8px;
left: 16px;
font-family: Helvetica;
}
.Mid #Selfie img{
display: block;
border-radius: 50%;
position: fixed;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -100px;
}
.Mid #TopRight {
position: absolute;
top: 3%;
right: 3%;
font-family: Helvetica, Arial, sans-serif
}
.Mid #About {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -200px;
text-align: center;
max-width: 20%;
}
欢迎来到 StackOverflow。
理想情况下，您应该提供带有公开可用图像的工作示例，但我使用我发现的叶子的随机图像重新创建了您的示例。
我看到的最大问题是你的定位都是错误的。如果你对所有东西都使用绝对定位，你永远不会在响应式设计上走得太远。
相反，您应该从使用文档的自然流程以及调整定位的 CSS 技术开始。在这种情况下，您似乎正在尝试让图像后跟一段文本，并且您希望两者居中。在 CSS 中有一些居中技术。在这里，我使用了经典的margin: 0 auto属性来创建自动居中的边距。
body {
background-color: black;
min-height: 100vh;
min-width: 100vw;
color: white;
font-family: Helvetica, Arial, sans-serif;
}
#topLeft {
font-family: Helvetica, Arial, sans-serif;
}
#selfie img {
display: block;
border-radius: 50%;
margin: 0 auto;
height:100px;
width:auto;
}
#topRight {
position: absolute;
top: 3%;
right: 3%;
font-family: Helvetica, Arial, sans-serif
}
#about {
display: block;
text-align: center;
padding: 10px;
padding-left: 3em;
padding-right: 3em;
margin: 0 auto;
}<body>
<div id="topLeft">
Daniel Apacik
</div>
<div id="selfie">
<img src="https://www.woodlandtrust.org.uk/media/100758176/whitebeam-leaf-paul-sterry-NPL.jpg" alt="Example photo">
</div>
<div id="about">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto pariatur atque excepturi id vero voluptatibus iste commodi. Necessitatibus atque illo itaque officia exercitationem maiores culpa molestiae ipsa. Voluptates, iste magni.
</div>
<div id="topRight">
Projects | Contact
</div
</body>我建议阅读CSS技术。一个好的开始是CSS技巧。例如，他们有一个很好的指南，以CSS为中心的所有事情。
但作为一般规则，始终避免任何假定宽度的位置。使用相对位置与HTML中的排序，以及百分比，计算等。当您确实需要将样式限制为特定屏幕尺寸时，可以使用媒体查询