移动端WEB开发常见布局

流式布局（百分比布局）

• 流式布局，就是百分比布局，也称非固定像素布局。
• 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
• 该布局是移动web开发使用的比较常见的布局方式。
  注意事项
  制作过程中，需要定义页面的最大和最小支持宽度。
• max-width最大宽度 （max-height最大高度）
• min-width最小宽度（min-height最小高度）

flex弹性布局

相比传统布局，操作方便，布局极为简单，移动端应用广泛。但是PC端浏览器支持情况较差。

• flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
• 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex布局原理： 通过给父盒子添加flex属性，来控制子盒子的位置和排序方式。
采用flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。

rem适配布局

先了解什么是rem？

rem（root em）是一个相对单位，类似于em，em的基准是相对于父元素字体大小。而rem的基准是相对于html元素的字体大小。
优势是父元素文字大小可能不一致，但整个页面只有一个html，可以控制整个页面的元素大小比例。

再根据不同屏幕尺寸，进行适配。这里就需要用到 媒体查询 。

媒体查询（Media Query）是CSS3新语法。
使用@media查询，可以针对不同的媒体类型定义不同的样式。
语法规范：
@media 媒体类型 关键字（媒体特性）{CSS-Code}

通过媒体查询可以根据不同设备宽度来修改样式，rem单位根据html元素的字体大小，来设置页面元素的不同大小尺寸，从而实现元素动态大小变化。

动态的实现大小变化，少不了样式内有数字的计算。可以使用Less进行辅助。

现市场主流的rem适配方案技术搭配：less+媒体查询+rem、flexible.js+rem

响应式布局

开发原理是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同的设备。

响应式布局容器

• 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
• 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大戏，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。