移动端适配（一）

移动端适配主要目的在于使得H5页面在不同尺寸大小、不同比例的显示设备上，都具有良好的用户体验。
简而言之，就是看起来舒服，操作起来方便。

这就要求:

• 在不同显示设备间对元素与元素之间的空间关系 （布局）处理要合适;
• 文本的大小要适宜;
• 图片不能过度变形、显示失真不能太过明显;
• 等等。

图片

图片的适配相对比较简单，主要处理两种情况：img标签和背景图片。

img标签图片

这种使用图片的方式，主要需要解决图片形变和失真问题。
为了防止形变，我们通常可以采用下面的方法：

1. 通过指定宽度（或者高度），使高度（或者宽度）自适应来实现；
2. 也可以通过约定图片区域的规格，规定只显示固定比例大小的图片。

正常情况下来说，第2种方法更加可取，可以避免产生的副作用，比如图片宽（或高）超出容器限制。
防止图片失真，有两种方式：

1. 对所有显示设备，统一使用高清图片。这种方法简单，缺点是在一些场景下费流量，速度相对慢一点。
2. 使用picture标签，设置不同显示场景下的图片。这种用户体验相对会好些，坏处是实现相对难一点，需要准备不同的分辨率的素材以及编写对应的代码。

背景图片

对背景图片的适配，同样需要处理图片形变和失真的问题，只是处理的方法不一样。

• 大图小容器：

  1. 一般可以通过缩放大图来适配小容器，这种用法的限制是图的宽高比例和容器差别不大，看不出图的形变。
  2. 调整图片在容器中的显示区域，使得图片的主要部分处于显示区域中。这种方式需要控制好图片在显示区域中的位置

• 小图大容器

  1. 拉伸小图覆盖容器，这种做法一般只适合在图片和容器尺寸相差不大，拉伸不剧烈的情况下。可以结合css媒体查询，在不同显示设备下，设置不同大小的图片以使得图片和容器的尺寸差距不会太大。
  2. 背景色 + 图片居中，可以使用和图片相近的（或相搭的）颜色补充图片覆盖不到的地方。这样的优点是图片保持原有大小，不会失真，也不会拉伸形变。缺点是使用场景受限，需要找到匹配的背景色。

文本

文本的处理相对比较简单。

1. 固定大小：一般情况下，文本字体的大小可以采用固定大小，不需要做其他处理。可以这样做的主要原因是每个人的眼睛离手机设备的距离都在一定范围内的（不太可能拿iphone6的时候距离是0.4m，拿iphone6 plus的时候是0.6m）。
2. Scale文本：对一些标题字，或者一些带感情色彩的、需要强调的文本，这些文本字体大小比一般的要大，为了体现出在不同显示设备同样醒目，我们可以缩放文本字体。使字体大小缩放的方法有很多种：
   1、rem+动态调整html的字体大小（js或者breakpoints）
   2、vw
   3、transform的scale
   等等。
   为了使文本缩放可以平滑的过渡，并且不会太小和太大，我们还可以使用计算函数calc来计算字体的大小。一种超级简单的做法是使字体发生线性变化，例如：

html {  font-size: 10vw; }
/* 或 html { font-size: calc(1em + 1vw) } */

布局

布局是适配中最复杂的了。在这里我给出几种建议：

1. 不限宽不限高。
   一般情况下不要限制容器的宽度和高度，让内容撑大容器。
2. 限高不限宽。
   页面的头部和尾部一般都是要限制高度的，但是宽度一般随显示屏幕的宽度。
3. 限高限宽。尽量少用。
4. 使用flex（或grid）进行对齐。