移动端适配方案

1
移动端手持设备的屏幕大小，屏幕密度都是不一样的，不可能为每种类型的设备写套代码，所以我们需要写一套代码让他自动取适配何种型号的设备，h5，小程序原生app开发都需要处理这个问题。
2
要想一套代码适配所有型号的手持设备,必须需要使用相对单位,css原生提供的有vw，vh，vw是把屏幕宽度分成100份，1份就是1vw，vh是类似的，对当前屏幕视口高度分100份，如果定义一个div时，宽度定义50vw，那么这个div就会占据设备宽度的一半，将来设备屏幕宽度比较大的话，这个div就大一点，小的话，这个div的宽度就小一点，
3
rem这个相对单位，页面每个元素的宽度大小，间距，填充等都相对于页面的根元素html的font-size的大小，比如说对iphone678等宽度为375的设备，把html的font-size的大小设置为37.5，那么此时页面上一个div大小，在代码中他的定义{widht:8rem,height:6rem}，此时相对37.5这个基准值，得出了div的宽度的相对值8rem和6rem，那么在大的屏幕上，我们将rem基准值调大，那么这个div盒子的大小就自动变大，同样小的设备上，把基准值rem调小，div真实大小就会相应的变小，

具体实现:
1
先查看设计稿的宽度，比如说750px的二倍设计稿，我们可以根据自己的实际情况分成10份（20份），1份就是html的font-size的大小，他就是rem这个相对单位的基准值(分10份，1rem= 75px = 37.5px)
2
使用上一步的基准值,把设计稿中各元素的宽高，填充，间距，字体大小，这些固定的px单位，转成rem相对单位
3
根据当前屏幕视口的大小来计算基准值，将计算出来的基准值设置到html的font-size上

px em rem

px 是像素单位，绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字图像化长度单位

em 是相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，他会继承父级元素的字体大小，因此并不是一个固定的值

rem 相对于html跟元素的长度单位