element 手机适配_爬坑： 多端适配的困惑和解决

多端适配，一直以来都是一个比较复杂的问题，我很难在一篇文章中把所有的点总结全面，但通过这篇文章我希望大家在自己的工程中能够拓宽思路选择适合于自己工程的适配方案。我的工程中适配的机型大概是PC，ipad,大多数正常的手机屏幕，并没有精确的分辨率适配方案，只是力求在各个屏幕上不会乱七八糟，以期望尽可能良好的用户体验。于是在这样的需求下，我在以下几个方面对我的前端页面适配进行规划。（如果有更完备的多端适配方案希望大佬能给出，在这里先感谢赐教）

一、全局：在大布局中使用自适应方案

二、图片，小组件：使用合适的宽高单位

三、局部：对无法正常显示在小屏幕上的部分进行小部分改写

问题：在具体环境中如何配合使用这几个方案

分析：

一、全局

（1）使用ui库自带的Layout，栅格布局方案

例如iView和Element中都有类似于

<Row>
<Col span="12">col-12</Col>
<Col span="12">col-12</Col>
</Row>

的方案，在使用UI库时，布局可以这样使用

（2）对于原生的组件使用flex,grid布局等等。这里之前我有过总结就不再详细解释。

以上两种方案都是可以在最大程度上满足你在不同分辨率屏幕上看到一个差不多样子的基本布局的。但这样远远不够。

二、图片，小组件

在图片和部分样式组件上，基本布局会让它们一定程度上变形