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

Question

我是一名网页设计专业的学生，​​正在开发我的作品集网站。我有一个具有非传统设计或布局的简历页面。我遇到的问题发生在调整页面大小时。随着窗口变小，某些元素会被向下推。我需要找到一种方法在调整大小时调整它们的上边距，但我无法仅通过媒体查询来实现这一点。有关我遇到的问题的示例，请参阅以下代码笔。

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

当浏览器低于 1440 像素时，悬挂在绳索上的框开始向下推。当用户减少或增加窗口调整大小时，有没有办法使用 javascript 重新计算边距顶部并将其应用于元素？最终目标是让绳索在放置红点的地方保持连接，因为我要给悬挂的盒子一个微妙的摆动或摇摆动画。

任何帮助将不胜感激。 谢谢

Answer 1

我不明白，除了margin-top，我所要做的就是你所做的。您可能想对这些值进行一些操作，因为我以前从未使用过 scss（我会使用 <canvas> 和 javascript 开始），但它确实有效。 http://codepen.io/anon/pen/iJgqn

顺便说一句，如果您打算在移动设备上以横向模式显示它，您可能需要左右切割盾牌，否则它可能会缩放得非常小。在这种情况下，也许将它们放在大盾牌下，并尽可能放大其余部分。

Answer 2

对于投资组合网站，我建议重新考虑整个设计。单从这个sn-p来看，似乎设计不是很容易理解，依赖太多。这个概念很酷，但是当您想展示您的技能和创造力时，您还想展示您对可访问性（响应性）、可用性和当前趋势（简洁、简约和扁平化设计）的理解。我并不是说你应该按照其他人的方式设计并设计，但你需要吸引客户，这是投资组合的全部目的。