移动端适配

做移动端项目，不可避要寻找一个手机端页面与手机屏幕适配最佳方案。首先要理解dpr（设备像素比的概念）

设备像素比：

（1）物理像素：
一个物理像素是显示器(手机屏幕)上最小的物理显示单元（像素颗粒），在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

如下图：通常手机的主屏尺寸就是物理像素，iPhone6上就有1334*750个物理像素颗粒。

（2）逻辑像素
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，有时我们也说成是逻辑像素。

它们之间的关系为： dpr = 物理像素/逻辑像素 一般情况下的ui设计图 dpr为2，iphone5,6为设计稿

自适应布局单位：

1em = 16px 且em是相对其父元素
1rem等于根元素（html）的字体大小，兼容性好，但rem有一个问题，不是一个自适应的单位，不会跟着设备尺寸不同而不同，可以用js动态的设置它。

项目实践：

index.html
html 标签上设置 style=‘font-size:100px’
样式中 就可以 160px 写成1.6rem了 但是这样有一个问题，并不会随着屏幕大小变化而自适应，我们可以通过以下js来动态设置

此为iphone5为设计机型，如果以iphone6位设计机型 就把3.2更改为3.75

document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.2 + 'px'
window.onresize = function() {
  document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.2 + 'px'
}