在窗口调整大小上重新计算和重新定位元素

Question

我是一名网页设计专业的学生，​​我正在我的投资组合网站上工作。我有一个非传统设计或布局的简历页面。我调试的问题发生在调整页面大小时。随着窗口变小，某些元素被向下推。我需要找到一种方法来调整其最大边距，因为调整大小发生，但我无法单独使用媒体查询来完成此操作。有关我遇到的问题的示例，请参阅以下codepen。

http://codepen.io/anon/pen/Hkpny

当浏览器低于1440像素时，悬挂在绳索上的盒子开始向下推。有没有办法使用javascript重新计算margin-top并在用户减少或增加窗口大小时将其应用于元素？最终的目标是让绳索保持连接位置，因为我将给悬挂盒提供微妙的摆动或摇摆动画。

非常感谢任何帮助。 感谢

Answer 1

我没有得到它，我所要做的就是你为margin-top而做的事情。你可能想要玩这些值，因为我以前从未使用过scss（我用<canvas>和javascript来开始），但它有效。 http://codepen.io/anon/pen/iJgqn

顺便说一下，如果您计划在移动设备上以横向模式显示它，您可能需要左右切割防护罩，否则它可能会缩小。在这种情况下，也许将它们置于大盾之下，尽可能多地放大其余部分。

Answer 2

对于投资组合网站，我建议您重新考虑整个设计。仅从这个片段看来，设计似乎不是很容易访问，并且依赖性太多。这个概念非常酷，但是当你想要展示你的技能和创造力时，你也希望展示你对可访问性（响应性），可用性以及现在趋势（干净，简约和扁平设计）的理解。我并不是说你应该排队并设计其他人是什么，但你需要吸引客户，这是投资组合的全部目的。