css – 非平凡的响应式设计布局技术(即移动物体)

清除瘦视口中的列是一个简单的壮举,但我需要技术来移动物体.我正在努力调和一对显着不同的移动和桌面模拟.桌面模拟包含一个3列网格,该网格应该在移动视图中折叠成一列网格,然后隐藏一些元素并重排其他元素.

使用display:none来隐藏元素是微不足道的.对我来说困难的部分是打破列中的元素并将它们移动到整个地方,就像http://bostonglobe.com/.从Firebugging他们的布局,我发现你可以通过操纵浮动来破坏源顺序,这可能会被重置并拥有元素在移动视口中使用媒体查询清除.这是在折叠视图中使中间列(在3列网格中)清除其他2列内容之下的一种方法.

这是使用纯CSS来响应回流布局的程度吗?我可以使用其他技术(可能使用JavaScript)吗?

最佳答案 你不能操纵DOM到那个程度……没有办法实际重新排序标记.我解决这个问题的方法是复制元素并将其定位到特定视口宽度所需的位置并隐藏它直到需要它为止.

完全避免这种情况的最佳方法是首先设计移动设备:

http://stuffandnonsense.co.uk/projects/320andup/

点赞