使用 CSS 当窗口宽度减小时向右移动元素
Posted
技术标签:
【中文标题】使用 CSS 当窗口宽度减小时向右移动元素【英文标题】：Move an element right when window width decreases using CSS 【发布时间】：2018-02-28 15:44:33 【问题描述】：默认行为
*
margin: 0;
html,
body
height: 100%;
div
width: 10rem;
height: 10rem;
background-color: #333;
position: absolute;
left: 25%;
<div></div>调整窗口大小时，div 距离其容器的左边缘 25%。
我们能否增加或假象left 属性的百分比值随着窗口宽度的减小而增加？
编辑：这是否可能在不使用 1000 个媒体查询或 JavaScript 的同时保持平稳、一致、不紧张的过渡？
其实我很久以前就用纯CSS实现过这个效果了，但是忘记是怎么做的了。我的代码有点复杂，并且使用了很多百分比来表示宽度和绝对定位。但我知道这是可能的。至少在寻找 CSS hack。
【问题讨论】：
您需要媒体查询来实现这一点。这应该对您有所帮助：w3schools.com/cs-s-ref/css3_pr_mediaquery.asp @pegla 谢谢你，但媒体查询不会是一个平稳的过渡，除非我们有一百万大声笑 如果你想要平滑，你可以在 css 上设置转换属性，稍微调整一下，对于初学者来说，transition: 1s all;如果你不介意使用它，总有 JS。 @pegla 使用过渡仍然不会像我的示例中的默认行为那样平滑。它只会在断点处设置动画。我不想要一个更线性的过渡，它取决于每个计算器的浏览器窗口的大小。在我的示例中，默认 CSS 的确切工作方式是向右移动而不是向左移动。 所以你想拥有例如left: 20%当宽度= 1024px和left: 30%当宽度= 768px等等？
【参考方案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);
<div></div>【讨论】：
【参考方案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 的回答以上是关于使用 CSS 当窗口宽度减小时向右移动元素的主要内容，如果未能解决你的问题，请参考以下文章