Sut*_*ala 12 html css css3 responsive-design
我有以下HTML格式,将给定元素放置在桌面顶部和移动设备底部(宽度<640像素)的有效方法是什么？由于有许多不同的设备,我不想写位置坐标,因为页面高度的内容会有所不同.有什么建议？
<html>
<head>
..
</head>
<body>
..
<p>I am on the top of desktop page, and bottom of mobile page</p>
...
</body>
</html>
cim*_*non 23
使用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浏览器出现意外结果.
display: table-footer-group(IE8 +)可以实现比flexbox更好的兼容性
反向效果:要移动一个比HTML代码更高的元素,你可以尝试table-caption和table-header-group.
不适用于自我更换的元素,img或者input至少在Chrome上(这是很正常的),但是很好div.
编辑:这是2016年所以Flexbox(和Autoprefixer)的所有东西\ o /