我正在创建一个响应式设计网站.
例
链接死亡 – 我不再拥有的网站
如果您调整浏览器窗口的大小,您会注意到3种不同的设计(基于最终目标设计而非设备类型)
V1：大于999px,你会看到红色框左上方,红色框旁边的蓝色框.
V2：介于600px和999px之间,你会发现红色框变小了,蓝色框现在位于红色框下面
v3：小于600px,您会再次注意到红色框变小,蓝色框现在变黄.
基本上,在V3中,我想制作现在的黄色方框,坐在绿色方框下方,灰色方框上方
所以订单顺利
红盒子
绿盒子
黄色的盒子
灰盒子
除了讨厌的隐藏老div,显示新的div hack(技术)或JS版本(远离CSS响应)
有没有办法移动它.
干杯
解决方法
老实说,单凭CSS无法想到一种方法,但在jQuery中很容易实现,而不会破坏你的响应式设计.除了从#top-links div中删除margin-top之外,您的CSS不需要更改.
<script type="text/javascript">
$(document).load($(window).bind("resize",listenWidth));
function listenWidth( e ) {
if($(window).width()<600)
{
$("#topLinks").remove().insertAfter($("#content"));
} else {
$("#topLinks").remove().insertBefore($("#content"));
}
}
</script>
