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

小编典典

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

css

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

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

阅读 376

2020-05-16

共1个答案

小编典典

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

@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;
  }
}

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

2020-05-16