gpt4 book ai didi

css - 重要的响应式设计布局技术(即四处移动)

转载 作者:行者123 更新时间:2023-11-28 08:48:41 25 4
gpt4 key购买 nike

清除瘦视口(viewport)中的列是一项简单的壮举,但我需要移动事物的技巧。我正在尝试调和一对截然不同的移动和桌面模拟。桌面模拟包含一个 3 列网格,它应该在移动 View 中折叠成一个单列网格,然后隐藏一些元素并重排其他元素。

使用 display: none 隐藏元素很简单。对我来说最困难的部分是将元素从列中分离出来并将它们移动到各处,就像 http://bostonglobe.com/ .从 Firebugging 他们的布局中,我发现您可以通过操纵 float 来颠覆源代码顺序,这可能会被重置并在移动视口(viewport)中使用媒体查询清除元素。这是一种在折叠 View 中使中间列(在 3 列网格中)在其他 2 列的内容下方清晰可见的方法。

这是纯 CSS 响应式重排布局所能达到的程度吗?我可以使用其他技术(也许使用 JavaScript)吗?

最佳答案

您不能将 DOM 操作到那种程度……实际上没有办法对标记进行重新排序。我解决这个问题的方法是复制元素并将其定位在特定视口(viewport)宽度需要的位置,并在需要时隐藏它。

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

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

关于css - 重要的响应式设计布局技术(即四处移动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10401002/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com