调整大小时使 div 自动向左移动答案

【问题标题】：Making div automatically move to left on resizing调整大小时使 div 自动向左移动
【发布时间】：2013-12-27 12:23:01
【问题描述】：

使用 css，如何使 div 在调整浏览器窗口大小时逐渐移动到最左边的位置，即触摸左屏幕边框？这意味着，当浏览器正在调整大小时，div 应该一直向左移动，直到它触及屏幕浏览器左边框。

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

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

【问题讨论】：

div 从哪里开始？您可以发布原始代码，然后解释您想要它做什么吗？你的意思是当它调整大小时，它会逐渐移动，还是像动画或只是一个 edn 结果？
no.. 只是我有一个 div，它的位置绝对距左侧 300px。随着浏览器的大小调整，我希望它逐渐减小到 0px。是否可以在 css 中使用，或者我应该使用 JS 吗？
我已经编辑了问题。
将固定左侧更改为 % 对您有帮助吗？像这样left : 300px; 到left : 35%;
如果你想让它响应不同的屏幕，你可以使用媒体查询

标签： css responsive-design

【解决方案1】：

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

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

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

【讨论】：