使用 CSS 当窗口宽度减小时向右移动元素答案

【问题标题】：Move an element right when window width decreases using CSS使用 CSS 当窗口宽度减小时向右移动元素
【发布时间】：2023-04-02 01:29:01
【问题描述】：

默认行为

* {
  margin: 0;
}
html,
body {
  height: 100%;
}
div {
  width: 10rem;
  height: 10rem;
  background-color: #333;
  position: absolute;
  left: 25%;
}

&lt;div&gt;&lt;/div&gt;

调整窗口大小时，div 距离其容器的左边缘 25%。

我们能否增加或假象left 属性的百分比值随着窗口宽度的减小而增加？

编辑：这是否可能在不使用 1000 个媒体查询或 JavaScript 的同时保持平稳、一致、不紧张的过渡？

其实我很久以前就用纯CSS实现过这个效果了，但是忘记是怎么做的了。我的代码有点复杂，并且使用了很多百分比来表示宽度和绝对定位。但我知道这是可能的。至少在寻找 CSS hack。

【问题讨论】：

您需要媒体查询来实现这一点。这应该对您有所帮助：w3schools.com/cssref/css3_pr_mediaquery.asp
@pegla 谢谢你，但媒体查询不会是一个平稳的过渡，除非我们有一百万大声笑
如果你想要平滑，你可以在 css 上设置转换属性，稍微调整一下，对于初学者来说，transition: 1s all;如果你不介意使用它，总有 JS。
@pegla 使用过渡仍然不会像我的示例中的默认行为那样平滑。它只会在断点处设置动画。我不想要一个更线性的过渡，它取决于每个计算器的浏览器窗口的大小。在我的示例中，默认 CSS 的确切工作方式是向右移动而不是向左移动。
所以你想拥有例如left: 20%当宽度= 1024px和left: 30%当宽度= 768px等等？

标签： html css responsive-design responsive

【解决方案1】：

您可以使用 CSS 的calc() 功能。它计算内部的表达式。

div {
  left: calc(-25% + 100px);
}

https://jsfiddle.net/93hLhhvp/

【讨论】：

【解决方案2】：

通过将与左侧的距离由负标量 + 常数值组成，而不仅仅是正标量，您可能会得到接近您正在寻找的东西：

@keyframes changeSize {
  0%   { width: 100%; left: 0%; }
  50%  { width: 30%; left: 35%; }
  100% { width: 100%; left: 0%; }
}

.container {
  position: fixed;
  width: 100%; height: 100%;
  left: 0%; top: 0%;
  box-shadow: inset 0 0 0 1px #000000;
  
  animation-name: changeSize;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.container > .box {
  position: absolute;
  width: 50px; height: 50px;
  background-color: #000000;
  top: 50%; margin-top: -25px;
  left: -20%; margin-left: 150px; /* here's the negative-scalar + constant! */
}

<div class="container">
    <div class="box"></div>
</div>

随着父级的大小减小，标量变得更加重要，按百分比计算。

请注意，动画仅用于演示！ :)

【讨论】：

这太棒了。

【解决方案3】：

在某种程度上这是可能的：您可以使用right 属性而不是left 和一个calc 值，它包含一个高于100% 的百分比，减去一个相对较大的固定值。找到适合您个人情况的设置需要反复试验：

* {
  margin: 0;
}
html,
body {
  height: 100%;
}
div {
  width: 10rem;
  height: 10rem;
  background-color: #333;
  position: absolute;
  right: calc(140% - 500px);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

尝试在 CSS 中使用媒体查询

Learn More About Media Query

示例代码：

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
div {
  width: 10rem;
  height: 10rem;
  background-color: #333;
  position: absolute;
  left: 25%;
}
@media screen and (max-width: 600px) {
  div {
    left: 50%;
  }
}
    </style>
</head>

<body>
   <div></div>
</body>

</html>

【讨论】：

查看我的编辑。媒体查询不会像我的示例中的默认 CSS 中的百分比那样提供平滑过渡。
我认为你需要 Jquery.resize() 来做到这一点。在这里看到它：api.jquery.com/resize
查看@Gershom Maes 的回答