移动端适配问题移动端适配问题

适配是什么：在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者保持统一效果的等比缩放（看起来差不多）

适配元素：

【移动端适配问题】1.字体
2.宽高
3.间距
4.图像（图标、图片）--比较复杂

适配的方法： 1.百分比适配
百分比布局问题：
1.百分比的值不好计算
2.需要确定父级的大小，因为要根据父级的大小进行计算
3.宽度可以设置，但是高度不好设置
总结：一般情况下百分比布局是需要配合其他的布局而使用

2.比例缩放适配
把所有机型的设备独立像素设置成一致的（以前淘宝使用过这种方法）
1.viewport需要通过js动态设置（不能直接把device的值设置成数值）
js代码：

```
(function(){
/**
以iPhone6 plus为例子：
原来的尺寸：curweidth 414
要变成的尺寸：targetwidth 375
比例：scale？

换算scale方法：
如：414/比例=375
那么：比例=414/375
所以：scale=curweidth/targetwidth

*/
varcutWidth = window.screen.width;
vartargetWidth = 375;
varscale=curWidth/targetWidth;

varmeta = document.createElement("meta");
meta.name='viewport';
meta.content='initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+'';

document.head.appendChile(meta);

}()
```
2.通过设置比例（初始比例以及缩放比例），把宽度缩放成一致的
代码：
注意：viewport里给了缩放值以后，最终的页面的宽度是原来的值除以缩放比例
缺点：
1.就像viewport设置宽度的时候，可以吧宽度设置成一个固定值一样，会出现所有手机看上去都是同样的小没有分别了，不太好
2.算出的值在一些有小数的情况下可能会出现误差（无关紧要），因为设备独立像素不能有小数

3.viewport适配
比例缩放适配：根据dpr的值，吧饰扣进行缩放，缩放到wuli像素，也是把屏幕的尺寸直接设置成它对应的物理像素。（淘宝在用，不过他只处理了dpr为2的几个设置，以及iPhone6 plus）

缺点：
1.这种方法有时候不准确，比如dpr不为整数的时候，会出现除不尽的情况，那缩放的倍数会出现很长的小数，再去算物理像素的时候就会有误差
2.如果屏幕的分辨率是非标准的话，算出的物理像素就是非标准的。
/**
同上个方法类似
*/
js代码：
varscale=1/window.devicePixelRatio;

varmeta = document.createElement("meta");
meta.name='viewport';
meta.content='initial-scale='+scale+',minimum-scale='+scale+',maximum-scale='+scale+'';

document.head.appendChile(meta);

}()

4.rem适配
什么是rem适配：
px：绝对单位，给多少就是多少
问题：不管屏幕尺寸怎么变化，它都不会变，做不到适配

em：相对单位，相对于自身字体大小的值
font-size：12px1em=12px
问题：
1.chrom下有最小字体限制，必须为12px，所以这个值不能小于12
2.如果两个一样的元素，但是里面字体不一样，那就不能
统一设置了，或者元素字体变化了，就又要统一设置一遍
remCSS3新增的一个相对单位，相对于根节点(HTML)字体大小的值
rroot
html{font-size：10px}2rem=20px
通过它就可以做到只修改根元素的大小，就能成比例地调整所有的字体大小，只依赖html字体的大小