移动端常用布局方式
当移动端单独制作时,使用传统的布局虽然兼容性好,但是它的布局繁琐,且有局限性,不能在移动端很好的布局。所以很多时候我们可以借助下面的几个方式来帮助我们更好的布局。
移动端常见布局:
- 流式布局(百分比布局)
- flex 弹性布局
- less+rem+媒体查询布局
- 混合布局
响应式布局:
- 媒体查询
- bootstarp
今天我们先来认识一下百分比布局和flex布局
1.流式布局:
流式布局,就是百分比布局,也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。
如:
如果给定一个盒子,固定好它的宽(width)为200px,高(height)为100px。我们想将它平分为4份,那么忽略边框的影响。每一份的宽应该是50px。此时我们是不是可以用百分比布局设置子元素的宽为25%吧。我们下面来看看是不是这样的
<ul class=<