移动端适配方案

这里介绍四种移动端适配方案
前两种都是一般适用于html单页面应用，后两种只能适用于工程项目

第一种：百分比布局

百分比布局就是使用百分比作为单位去进行适配，但是对于字体来说就太合适了

第二种：rem布局

视频地址
rem的布局主要有以下两种方式：

• 第一种比较麻烦，我们需要自己定义份数，然后还需要通过媒体查询与定义份数算出不同屏幕下font-size的值，此时我们会写一大堆媒体查询去针对各种屏幕进行适配，而且计算量较大，不推荐使用(rem与媒体查询是什么在这里就不过多介绍了)。
• 第二种非常方便，而且适配效果也非常的好，它是由淘宝推出的，它将屏幕划分为十份，并且已经计算好了不同屏幕下font-size的值，我们只需要关注如何去计算rem值就可以了

今天主要是向大家介绍一下rem的flexible适配方案——rem适配，不过还是要介绍一下第一种比较麻烦的，不过不感兴趣的可以直接跳过看第二种方式

• 首先我就教大家如何去使用方案一。
  第一步要做的就是去定义划分的分数，然后使用媒体查询计算出font-size值
  
  然后再去计算size与rem值
  
  @size的值为设计稿的大小/划分的分数，也就是750/15=50，然后就是去计算rem值：元素的尺寸/size值，最终就完成了适配！！！

• 下面我就教大家如何去使用方案二。

先将下载好的flexible引入进来，如
如果引入成功的话，我们拉动浏览器就会看到font-size在不停地变化，如下：

• 由于rem布局是根据根元素的字体大小而改变的，flexible根据屏幕的宽度不停地改变font-size的大小，当html的字体发生改变的时候，由于我们的元素使用的rem单位，我们的元素大小也会发生相应的改变，然后我们就做到了一个页面适应所有屏幕的效果，这就是flexable的精髓所在。

• 在实际开发中，如果美工给我们的是750px设计稿的时候，比如有一个元素在750px下的大小是100px，如果想要进行适配，就必须把它转变为rem单位，计算公式如下：font-size*rem=元素大小，由此我们就可以计算出rem为100/75=1.333333rem，就这样把所有的元素计算下去，我们的页面就可以进行适配了。

不过每次都要计算一次，相当麻烦，这里一般是使用vscode的第一个插件，

他可以帮助我们完成计算使用方式如下：
在设计稿为750px的情况下点击扩展，cssrem的管理，扩展设置，改为75(如果为375px的像素高，设置为37.5即可)。

这样子当我们在写长度的时候就不要再自己计算具体的长度了，直接把px写上，他会自动帮我们进行计算，他就省去了我们上面计算的步骤(100/75=1.333333rem)，选择rem就可以了，如下：
然后就完成了适配。
如果是其它设计稿仿照着上面步骤一步一步来就可以了。

第三种：使用postcss-px-to-viewport进行适配

这个是将px转变为vw或者vh
具体如何适配直接搜索postcss-px-to-viewport就可以了

第四种：使用postcss-pxtorem和amfe-flexible进行适配

这个是将px转变为rem
具体如何适配直接搜索postcss-pxtorem就可以了
以上两种在vant组件库都有提及