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

发布时间：2020-12-14 18:55:53 所属栏目：资源来源：网络整理

导读：我有以下 HTML格式,将给定元素放置在桌面顶部,移动设备底部(宽度 640pxels)上的有效方式是什么？由于有很多不同的设备,我不想写入位置坐标,因为页面高度的内容有所不同.有什么建议么？ htmlhead../headbody..pI am on the top of desktop page,and bottom of

我有以下 HTML格式,将给定元素放置在桌面顶部,移动设备底部(宽度< 640pxels)上的有效方式是什么？由于有很多不同的设备,我不想写入位置坐标,因为页面高度的内容有所不同.有什么建议么？

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

解决方法

以灵活的方式重新排列未知高度的元素最好用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年规范(显示：-webkit-box)的Webkit浏览器中出现意想不到的结果.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!