移动端适配问题（一步到位）

移动端适配之间的准备工作

amfe-flexible 动态设置rem基准值

1-安装配置的包npm I amfe-flexible
2-安装后在入口文件中进行加载 import ‘amfe-flexible’ 动态设置rem的基准值

设置PX转换为rem [行内样式不会进行转换为rem]
1安装 npm I postcss-poxtorem -D
2进行配置 根目录下创建 .postcssrc.js

具体的设置份数，需要根据UI的设计稿！，这里我以375PX的二倍图为例

postCss的介绍

一个处理CSS的工具，主要负责解析CSS代码，再交给插件进行处理，
他的插件非常的丰富：比如自动适配浏览器的声明前缀，让你的CSS可以适配低版本的浏览器，PX转换为rem

postCSS不是单独自己使用的，而是和已有的构建工具进行集成， VUE-cli中集成了 autoprefixer插件

移动端适配的问题

移动端的适配问题
1： 移动端手持设配的屏幕大小，屏幕密度都是不一样的，不可能为每一套设备写一套代码，自动去适配所有的设备，H5 小程序 原生APP开发都需要处理这个问题

2： 要想一套代码适配所有的型号手持设备，必须使用相对单位，CSS原生提供了VW VH。VW是把屏幕的宽度等分成了100份，1份就是1VW，对当前的屏幕视口高度份分100份，比如定义一个DIV，宽度为50VW，那么这个DIV就会占据设备宽度的一半，如果设备的宽度比较大，那么div就大一点，如果小的话,div宽度就小一些。

3 ： 当前的使用方案，rem相对单位，页面上的元素的宽高大小，间距，填充等都相对于页面的根元素，html的font-size他的大小，比如说对iPhone678的屏幕宽度375的设备，把font-size大小设置成37.5,那么此时的DIV（300X200）大小，在代码中他的定义就是{width:8rem;height:6rem}，这个时候就是相对于37.5这个基准值得到了div的宽度的相对值,
所以在大屏幕的设备上rem基准值变大，div就会自动的变大，在小屏幕的设备上rem基准值变小，div就会自动的变小

4.具体的实现

4.1先去查看UI给的设计稿宽度（比如说：750PX 二倍的设计稿），我们可以根据自己的实际情况分成十份（20份）都可以，1份就是HTML的font-size的大小，它的rem就是这个单位的基准值
4.2使用上一步的基准值，把设计稿中的宽高，填充，间距，字体大小，这些固定的PX单位，转换成rem的相对单位
4.3再通过第三方的工具（amfe-flexible）或者自己根据当前屏幕视口的大小计算基准值，将计算出来的基准值，设置到html的font-size上，也就意味着改变HTML的大小

5 比如针对720的设计稿
5.1查看设计稿的宽度是720，然后根据amfe-flexible这个工具将360的屏幕分成1份（1rem）是36px,反推将设计稿分成20份
5.2针对设计稿中680x75的容器，使用基准的值。