Question

默认行为

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

当窗口调整大小时，div从其容器的左边缘保持25％。

当窗口的宽度减小时，我们可以增加或给出 left属性增加的百分比值的错觉吗？

编辑：如果不使用1000个媒体查询或JavaScript，同时保持顺畅，一致，不紧张的过渡，这是否可行？

我很久以前就用纯CSS实现了这个效果，但忘记了它是如何完成的。我的代码有点复杂，并且在宽度和绝对定位上使用了很多百分比。但我知道这是可能的。至少在寻找CSS黑客。

Answer 1

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

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

https://jsfiddle.net/93hLhhvp/

Answer 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>

随着父母的体型减少，标量变得更加显着，按百分比计算。

请注意，动画仅用于演示！：）

Answer 3

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 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在窗口宽度减小时向右移动元素

默认行为

4 个答案: