使网站设计具有响应性的困难答案

【问题标题】：Difficulties making a website design responsive使网站设计具有响应性的困难
【发布时间】：2022-11-17 20:14:35
【问题描述】：

我想让我的设计更具响应性。但是每当我制作那些背景圆圈时，它就会停止响应，并且人的图像和黄色圆圈不再粘在中心。关于如何更好、更有效地完成它的任何提示？

我很难使其响应，因为所有元素都有positions: absolute。我目前正在这样做：

<div className="background">
   <div className='outer-circle'></div>     // Gray circles
   <img src={landingPersonImage} alt="">    // Image of the person
   <div className='section1-img-bg'></div>  // Yellow circle
</div>

我的主要问题是黄色圆圈没有粘在那些背景圆圈的中心。这是我的意思的视频： https://drive.google.com/file/d/1ZA_skdNAyt2L9pewoTIuIF4CKJLCsqIR/view?usp=share_link

Codepen-https://codepen.io/c0mpli-the-scripter/pen/OJExaLR 输出在 Codepen 上显示不正确。绿色圆圈是由box-shadow创建的同心圆

【问题讨论】：

尽量避免使用绝对位置，当你真的需要使用它时，将它放在一个带有position relative 的包装容器中，这样它将包含项目，然后使用相对位置容器，你将能够定位根据您对响应式视图的喜好。

标签： html css frontend responsive

【解决方案1】：

将 background 元素设为 grid container 及其子元素 - named grid areas。通过这种方式，您可以根据 @media 查询随意放置它们。
也不要忘记将 <img> 元素包装在 <span>/<div> 中，因为替换元素作为 flex/grid 项目的行为在浏览器之间是不一致的。

【讨论】：

好的，但我怎样才能让它在 z 索引上改变。因为有 3 个元素，灰色圆圈，人物形象，黄色圆圈。人 img 坐在黄色圆圈的顶部，黄色圆圈位于灰色圆圈的顶部？

【解决方案2】：

请向我们展示您的 CSS 文件，以便更好地帮助您。

但这里有一些提示：

- 将图像放在黄色圆圈内，以便更容易将它们一起处理。 -用flex控制这2列，给图片部分min-width和父divflex-wrap: wrap就可以了。 - 然后使用媒体查询处理其他屏幕中的微小差异。

【讨论】：

当我尝试将 img 放在圆圈内时，我必须使用绝对位置吗？ ``` <div className="wrapper> //yellow circle <img/>//person img <div> ``` 这就是你想说的吗？
是的，最好控制这张照片，你也可以隐藏它的底部并将它们作为一个处理。
我在我的问题（输出）中添加了一个视频，你能看看它并让我知道更好的方法吗？
例如，您可以在 codepen 上分享您的代码，以便能够为您提供帮助。
如果您使用的是 display: flex 然后添加 align-items: center 和 justify-content: center 它会修复它。我看过你的视频。

【解决方案3】：

这是 HTML 代码

<div class="parent">
  <div class="wrapper">
    <img src="/"/>
  </div>
  <div class="text">
  </div>
</div>

这是CSS代码

.parent{
 display: flex;
 align-items: center;
 justify-content: center;
}

.parent .wrapper{
 min-width: 250px; // just for example
 //or use flex-basis
 flex-basis: 250px;
}

.parent .text{
 min-width: 350px; // just for example
 //or use flex-basis
 flex-basis: 350px;
}

现在你控制了这 2 个 div，当你达到它们的最小宽度时，它们将适合你的屏幕并换行。

【讨论】：

请在您的答案中添加一些解释，以便其他人可以从中学习
我已经对其进行了编辑，以使您更清楚。希望这会帮助你。