六、流式布局（百分比布局）

6 移动端常见布局

移动端技术选型

移动端布局和以前我们学习的pc端有所区别：

1、单独制作移动端页面（主流）

流式布局（百分比布局），京东手机端是流式布局

flex弹性布局（强烈推荐），携程网手机端是弹性布局

less+rem+媒体查询布局，苏宁手机端是这个布局

混合布局

2、响应式页面兼容移动端（其次）

媒体查询

bootstarp

6.1 流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

流式布局方式是移动web开发使用比较常见的布局方式。

流式布局无限的拉伸或缩小，盒子会变得很大或很小，盒子里面的内容会出问题。需要设置：

max-width 最大宽度（max-height最大高度）

min-width 最小宽度 （min-height最小高度）

伸缩到最大宽度时候就不再变大了，缩到最小宽度后就不再缩小了

max-width:640px

min-width:320px;