响应式设计问题：放大/缩小时元素移位和重叠[关闭]

Question

我是网页设计的初学者，我在网站上遇到了响应式设计的挑战。当我放大网站时，容器内的元素分散得太远，导致布局混乱。相反，当我缩小时，这些元素开始重叠并且彼此变得太近。尽管我使用了相关单位和媒体查询，但问题仍然存在。我尝试过诸如

min-width

属性和

transform: scale()

之类的解决方案，但没有一个能够完全解决问题。

代码

问题详情：

我提供了我所面临问题的屏幕截图，其中元素在放大或缩小时无法保持其位置和对齐。布局混乱破坏了整体用户体验。我使用了相关单位和媒体查询来确保响应能力，但这些解决方案并未有效解决该问题。我正在寻找有关如何在放大和缩小时保持布局一致的指导

我尝试过的：

使用相对单位调整边距、填充和宽度。 实现媒体查询以适应各种屏幕尺寸。 探索变换：scale() 来控制缩放行为。

期望的结果：

我希望即使用户放大或缩小，我的网页布局也能保持不变。容器内的元素不应取代、重叠或损害设计的视觉吸引力。我在

中附上了所需行为的示例

Answer 1

你做的一切都很好，除了一些小错误。 这是一件事：

<div class="companieslogo">
    <img src="Assets/Logos/Walmart.svg" />
    <img src="Assets/Logos/JP Morgan.svg" />
    <img src="Assets/Logos/Visa.svg" />
    <img src="Assets/Logos/Tinder.svg" />
    <img src="Assets/Logos/Samsung.svg" />
    <img src="Assets/Logos/Verizon.svg" />
</div>

<!-- you have to use some parent divs to control your images -->

<div class="companieslogo">
    <div><img src="Assets/Logos/Walmart.svg" /></div>
    <div><img src="Assets/Logos/JP Morgan.svg" /></div>
    <div><img src="Assets/Logos/Visa.svg" /></div>
    <div><img src="Assets/Logos/Tinder.svg" /></div>
    <div><img src="Assets/Logos/Samsung.svg" /></div>
    <div><img src="Assets/Logos/Verizon.svg" /></div>
</div>

然后你可以使用@media query给这些父div一个非常好的和有效的样式。

第二： 您可以在顶部为菜单提供无显示或隐藏可见性，或者您可以制作一个以响应模式显示的按钮，并可以控制菜单向上或向下切换（为此使用 jQuery：jQuery Effects）

完成！这些是你的问题： 使用父项（例如：div || spans）来控制是否使用@media的对象， 尝试隐藏一些对象，这样您就可以获得更多空间，如果您想要它们回来，请使用 jQuery。

你想学习@media 查询吗？ CSS @media 查询