响应式网页设计，布局变化剧烈

Question

我一直都在想这个。

即使使用媒体查询，我如何显着改变事物的位置（因为我没有直接修改HTML中的元素放置）。

例如，如果社交Facebook / Twitter链接出现在页面中间的某个位置（其HTML容器元素嵌套在一堆其他父标签中），我将如何将其移动到页面底部（或者，使它看起来像是嵌套在不同的部分中。）

Answer 1

您至少有两个选择：

1. 更改容器元素的位置。您可以使用position: absolute或position: fixed将其移至页面上完全不同的位置，而不是静态位置（默认行为）。

2. 在两个不同的地方重复这些元素，并根据屏幕尺寸设置其中一个元素。

但是，我必须补充一点，在良好的设计中，这些措施很少是必要的。您不希望通过将元素移动到完全不同的位置来混淆用户。更好的方法是使用响应式网格（例如，在屏幕变小时将布局从三列更改为两列，或从两列更改为一个），将选项卡折叠到下拉列表中等，但保留不同元素的位置相对稳定。

Answer 2

移到页面底部不是什么大问题。根据父容器，使用position:absolute或position:fixed并调整此z-index和父容器。

但是，如果您想为特定媒体查询重新订购容器，则必须为更多元素提供绝对定位，调整浮动或使用Javascript。

如果这是客户请求，我会亲自重新审视线框阶段并从头开始规划您的响应行为。

Answer 3

你永远不能从CSS的角度来确定元素的高度：用户会缩放一点或多，包括或不包含图像;由于网络问题或用户选择等原因，图片不会显示。因此，position: absolute是未来或即时失败的秘诀（而fixed不是您要搜索的内容。）

你可以玩：

• flexbox（水平或垂直，自然或逆序）
• display: table-(header|footer)-group或display: table-caption以及table-cell，如果可能，父元素包含display: table（有或没有table-layout: fixed）或table-row < / LI>
• 浮动和Block Formatting Context effects（如此强大的野兽）
• nope：CSS网格布局为IE10 and IE11 only

如果你想在HTML和视觉上远离某个其他元素内的某个地方移动元素，那么请使用JS / jQuery。 CSS不允许复杂的操作。只需确保您注意调整从和调整桌面/移动设备分辨率（并允许初始操作以及在某些AJAX事件之后）并且不会触发100多个事件调整大小时每秒