Question

我有以下HTML格式，将给定元素放置在桌面顶部和移动设备底部（宽度<640像素）的有效方法是什么？由于有许多不同的设备，我不想写位置坐标，因为页面高度的内容会有所不同。有什么建议吗？

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

Answer 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可能会与其他布局方法冲突，例如典型的网格技术。设置为float的Flex项可能会导致使用2009规范（display: -webkit-box）的Webkit浏览器出现意外结果。

Answer 2

使用 display: table-footer-group （IE8 +）可以实现比flexbox更好的兼容性反向效果：要将元素移动到高于HTML代码中的元素，您可以尝试table-caption和table-header-group。

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

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

Answer 3

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

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

Answer 4

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

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

其中p元素获取类似的类属性：

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

底部＆amp;在您需要根据设备加载相关的顶部时，top不会存在。对于桌面，您还需要使用div的高度来偏移您的内容，以便它不会隐藏在固定的div下

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

4 个答案: