移动端常见布局

移动端常见布局

1. 流式布局

流式布局，也叫百分比布局，也叫非固定像素布局，是通过盒子的宽度百分比来进行伸缩，而不选用固定的像素作为大小的单位。

2. flex布局

原理：为父盒子指定flex属性后称为容器，所有子元素会自动成为容器成员，通过特定的规则进行排列

2.1 flex布局容器常见属性

• display: flex
  将父盒子指定flex属性
• flex-direction: row(默认) / row-reverse / column / column-reverse
  设置主轴的方向
• justify-content: flex-start(默认) / flex-end / center / space-around / space-between
  设置元素在主轴上的排列方式
  [注：space-around是均分剩余空间；space-between是先两边贴边再平分]
• flex-wrap: no-wrap(默认) / wrap
  是否换行
• align-items: flex-start / flex-end/ center / stretch(默认)
  设置侧轴上元素排列方式

2.2 flex布局容器成员常见属性

• flex: 数字(默认为0)
  指定子元素所占的份数
• order:数字(默认为0) 定义子元素的排列顺序，数值越小越靠前

3. rem适配布局

3.1 rem（root em）单位：是一个相对单位

​ [review: em是指父元素字体大小]

​ rem的基准是相对于html元素字体大小

3.2 rem的优势： 父元素字体大小可能不一致，但html可以很好的控制页面元素大小。

3.3 rem布局常和媒体查询一起使用

​ 先通过媒体查询(media query)控制html文字大小， 再通过rem单位进行动态的变化，代码如下图。