移动端flex布局适配有五种方案

移动端flex布局适配有五种主要的方案，分别是媒体查询、flexible.js、rem布局、vw/vh单位和CSSGrid布局。

1.媒体查询：媒体查询是响应式设计的基础，可以通过媒体查询针对不同设备和屏幕尺寸设置不同的样式。

2.flexible.js：flexible.js是一个基于viewport的布局解决方案，可以根据设备的物理宽度来动态调整布局。

3.rem布局：rem是相对于根元素（html）的单位，通过设置根元素的font-size，可以实现不同屏幕尺寸下元素大小的自适应。

4.vw/vh单位：vw和vh是相对于视口宽度和高度的单位，1vw等于视口宽度的1%，1vh等于视口高度的1%，可以用来实现响应式布局。

5.CSSGrid布局：CSSGrid布局是一种新的二维布局模型，可以用来创建响应式的网格布局。

拓展资料：

1.flexible.js的使用需要注意，它只适用于移动端，且需要配合meta标签使用。

2.rem布局的优点是易于维护，缺点是需要计算元素的大小。

3.CSSGrid布局是一种新的布局方式，可以替代flex布局和媒体查询，但浏览器的兼容性需要注意。

移动端flex布局适配有多种方案，开发者可以根据项目的需要选择适合的方案。无论选择哪种方案，都要注意响应式设计的原则，使网站在各种设备上都能提供良好的用户体验。