HTML/CSS 中浏览器放大/缩小时容器项重叠和位移问题

Question

我是这个领域学习网页设计的初学者，所以我面临这个问题

当我放大网站时，容器内的元素往往会彼此远离，导致布局混乱。同样，当我缩小时，这些元素会重叠并且彼此靠得太近。即使我使用相对单位和媒体查询来确保响应能力，也会出现此问题。我之前尝试过的解决方案，例如使用

min-width

属性和

transform: scale()

，都没有完全解决问题。

在这里查看我的代码

我尝试过：使用相对单位调整边距、填充和宽度。 实现媒体查询以适应不同的屏幕尺寸。 使用

transform: 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 查询