1.流失布局+PX
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那是屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。
实战：商机进度上报：使用position定位以及float俩种方式实现
这是第一次做移动端WebAPP开发和上面说的一样,在大屛下元素被拉伸,文字大小还是和原来一样。
2. 弹性布局Flex+PX
实战：订餐系统：使用Flex方式实现
这是第二次做移动端WebAPP开发,在大屛下元素被拉伸,文字大小还是和原来一样。这里注意遇到了安卓系统5.1,所以Flex标签要添加前缀
实战：调休系统：使用Flex方式实现
这是第三次做移动端WebAPP开发,在大屛下元素被拉伸,文字大小还是和原来一样。
以上尽管文字大小没有变化,但是整体上还是可以的
3. 弹性布局Flex+REM
实战：看视频：使用Flex方式实现+REM
这是第三次做移动端WebAPP开发,在大屛下元素被拉伸,文字大小也开始拉伸。
REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。所以你们可以去网上找方法将计算出来的rem转化为px。培训机构说什么使用rem布局这些都是骗人的，你们可以看看那些高访问浏览器那一个用了REM
4. 自适应布局（Adaptive Layout）+REM
5. 混合开发(Flex+流失布局+REM+自适应)兼容到IE9以上不包括IE8
实现:博客系统:使用合开发方式,在不同屏幕下元素,文字自适应.
2020/4/8:使用ie9查看页面布局乱了,我采用Flex布局.而Flex布局不能用于IE9.这个时候我想或许可以一起添加左右浮动.让其兼容ie低版本.但是我在实际工作中遇到的pc端也就是ie10.移动端安卓5.1也是ie10.所以我果断放弃.
2020/4/9决定兼容到IE9(⊙o⊙)…以下使用
