在响应式设计中将顶部元素移动到底部的最佳方法是什么答案

【问题标题】：What is the best way to move an element that's on the top to the bottom in Responsive design在响应式设计中将顶部元素移动到底部的最佳方法是什么
【发布时间】：2013-06-11 13:06:22
【问题描述】：

我有以下 HTML 格式，将给定元素放置在桌面顶部和移动设备底部（宽度

<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

最好使用 Flexbox 以响应式方式重新排序未知高度的元素。虽然对桌面浏览器的支持不是很好（IE 是这里的主要限制因素，支持从 v10 开始），但大多数移动浏览器确实支持它。

http://cssdeck.com/labs/81csjw7x

@media (max-width: 30em) {
  .container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }

  .container .first {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
  }
}

http://caniuse.com/#feat=flexbox

请注意，Flexbox 可能会与其他布局方法发生冲突，例如典型的网格技术。设置为浮动的 Flex 项目可能会在使用 2009 规范 (display: -webkit-box) 的 Webkit 浏览器中导致意外结果。

【讨论】：

【解决方案2】：

使用 display: table-footer-group (IE8+)
可以实现比 flexbox 更好的兼容性反作用：要将元素移动到比 HTML 代码更高的位置，您可以尝试table-caption 和 table-header-group。

不适用于 img 或 input 等自我替换元素，至少在 Chrome 上（这是很正常的），但对于 div 则很好。

编辑：现在是 2016 年，所以 Flexbox（和 Autoprefixer）所有的东西 \o/

【讨论】：

【解决方案3】：

我不知道这是否是最好的方法，但你可以在你想要的地方复制相同的元素并使用display: none/display: inline-block 属性。当它在桌面上查看时，您的 css 会告诉它在顶部显示一个，而不是在底部显示一个。然后，在手机上查看时，不应该在顶部显示一个，在底部显示一个。

就像我说的，我不确定这是最有效的方法，但它确实有效。如果其他人有更好的解决方案，我很乐意听到。

【讨论】：

【解决方案4】：

我假设当您说“位置”时，您的意思是当您滚动时它不会移动。在这种情况下，您可以使用：

p.className {
  position: fixed;
  bottom: 0; // for mobile devices
  top: 0; // for desktops
}

其中 p 元素获取类属性如下：

<p class="className">I am on the...</p>

bottom & top 不会同时存在，您需要根据设备加载相关的。对于桌面，你还需要用 div 的高度来偏移你的内容，这样它就不会隐藏在固定的 div 下

【讨论】：