从dpr谈起到移动端适配问题(一)

一、dpr

---

先看个公式：
devicePixelRatio （设备像素比 简写dpr）=physical pixels/ logical pixels(也就是device-independent pixel)
物理像素点：硬件上最小的显示点位，硬件不同最小点位就可能存在差异
设备独立像素点：系统设定的最小的显示点位，不可能小于物理像素点，这个单位的意义在于css样式中px 所对应的值，系统设是为了统一自己的设备显示的大小统一性，比方说ios 下所有iphone的设备独立像素点位大小相同。
设备像素比：上述两个的比值，js中可以通过window.devicePixelRatio 获得（chrome console下可以看到iphone4 5 5s 6 都为2，6s为3）
eg: 如下图相同尺寸下 dpr=粉色的physical pixels / 绿色的logical pixels 此处的场景设备像素比就是2；

二、CSS的px

---

先看一下w3.org 的描述
原文链接：
https://www.w3.org/Style/Examples/007/units.en.html
译文链接：http://blog.csdn.net/simonyuan100/article/details/52718297

css 中设置的px 就是参考设备独立的像素点 这样就是为什么同样ios下iphone机显示一致的原因；
下面验证下（方式：chrome 下 console控制台 移动开发模式）注意观察 红色框A*B两个值，以及紫色写死的宽和橙色动态的设备宽之间的关系：

红框内部：A*B 数值的单位px是设备独立像素 可以看到跟内容区域紫色的div（css 的px） 宽度是一致的；
另外你可以截图100%比例下，然后放到ps中 可以看到不同代iphone 独立像素大小是一致的；
同时，请注意在pc端 100%大小的模拟iphone跟实际iphone尺寸的大小显然不一样，pc端比较大，为什么存在这个问题，还是回到设备独立像素，window跟ios两个系统下定义的设备独立像素 即logical pixels大小不一样。

分辨率：
分辨率是设备全屏下的所有物理像素点数和；
公式：分辨率=设备横向物理像素点数和*设备的竖向物理像素点数和；

设计出图的像素基准：
设计出图会参考一个iphone 的物理分辨率来设计图稿，一般会参考较大分辨率的，然后向下适配；
为什么设计不按照逻辑像素大小设计图片？ ppi的意思又是如何？ 应该都不难理解吧，为了清晰度，乔大爷提出来视网膜屏幕，，，以及300ppi 这个神奇的数字。

这样切出来的图，如果直接用再css 中，显然是不合适的，css 的px 为逻辑像素，切出来的图为物理像素，
那这个时候如何完好的匹配到css中，可以通过window.devicePixelRatio 获取dpr 然后给meta 标签里设置initial-scale=1/dpr;缩放后的图片就刚好吻合了css;

三、移动端适配问题解决方案

---

首先理解rem， 1rem=the font-size of html(单位px)；
再者，理解适配的指导思想：
1，文字大小在小屏幕下 小点，在大屏幕下 大点，中屏幕下 两者之间值, 通过媒体查询或者js 动态生成 html font-size大小；所有文本信息，以rem来做单位；
2，icon图标 要把它当做文字来看待，所以设置长款时 单位用rem; 这个好处，即保证了宽高的同比例放缩（同一个单位），有保证了适配问题（rem适配变化）
3，块元素 采用100% 布局，如果兼顾长宽比例固定，则可以给长宽 css中同时使用vw 或者vh 单位，或者js中追加；
4，box-sizing: 多用border-box;