css - 使div在调整大小时自动向左移动

Question

使用 css，我怎样才能使 div 逐渐移动到最左边的位置，即，随着浏览器窗口的大小调整，触摸左屏幕边框？这意味着，随着浏览器的大小调整，div 应该继续向左移动，直到它触及屏幕浏览器的左边框。

#element {
  position: absolute;
  top : 40px;
  left : 300px;
 }

如果我以百分比形式提供值，对于左侧，它会逐渐向左移动，但仍会保持该百分比。我希望它逐渐减少到 0 或其他一些较低的值，以便右侧有更多空间。

Answer 1

所以你有几个选择。最“平滑”的是使用一个百分比，然后在您决定的某个点，某个最小屏幕宽度，您将放置 0% 或删除 float 或任何您想做的事情。会有一个点它会有点“卡入到位”，但如果你把它设为一个小分辨率，比如横向手机使用的分辨率，没有人会看到它卡住。为了完成此操作，请按照@Raunak Kathuria 所说并使用 CSS 媒体查询，如果您需要一个示例，我可以编写一个，但它非常基础，到处都有教程。只需搜索 CSS 媒体查询。

您的其他选择是使用一系列媒体查询，每个都将 div 移动到不同的位置。这不会是渐进的，而是在特定的屏幕尺寸下。

很多人在做响应式设计时，包括我自己，都会关注页面的外观和实际调整大小时的行为。实际上这并不重要。我认为绝大多数人在浏览网站时不会调整浏览器的大小。他们浏览并继续前进。因此，只要您的页面在任何屏幕尺寸下看起来都如您所愿，渐进移动是无关紧要的。这就是为什么我个人更喜欢媒体查询而不是灵活的布局。它提供了我想要的像素控制。