移动端常见的开发布局方式_移动端布局

一、流式布局

流式布局就是百分比布局，也称非固定像素布局。它通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发中使用的比较常见的布局方式。设置以下属性是为了保护文本内容无限制扩张或者页面收缩导致内容丢失。
max-width 最大宽度（max-height最大高度)
min-width 最小宽度（min-height 最小高度)
注意：二倍图、多倍图的用法。

二倍精灵图做法

1、在firework里面把精灵图等比例缩放为原来的一半之后根据大小测量坐标；
2、然后使用background-size属性设置为精灵图原来宽度的一半。

二、flex布局

flexible Box简写，称为"弹性布局"或"flex布局"等，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局(display:flex)。当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。其中，采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员（flex 容器的直接子元素会自动成为弹性项目），称为 flex 项目（flex item），简称"项目"。
优点：操作方便，相比传统布局方式布局极为简单，移动端应用很广泛。
缺点：PC端浏览器支持情况较差；兼容性差，在IE11或更低版本中不支持或仅部分支持（IE：没错，正是在下！）。
所以如果是PC端页面布局，可以使用传统布局。如果是移动端或者不考虑兼容性问题的PC端页面布局，还是使用flex弹性布局较为方便。
布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

父项常见属性

flex-direction ：设置主轴的方向(定义容器要在哪个方向上堆叠 flex 项目)。

flex-wrap：设置子元素是否换行。