移动端适配（绝对单位、相对单位、CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport）
在某公司做了一次分享，主题是‘移动端和pc端开发的区别’。可以说，这总结的原版就是在这样的契机下完成的。因为我只是习惯了移动端就应该那么写（设置viewport等），要是让我给大家分条讲下所以然，还真有难度，毕竟自己还不理解，看了几十篇文章，捋了好久，思路也不那么乱了，总结了一下，完成ppt，跟大家分享了一下，完了之后感觉自己进步很大。到如今时隔9个月了，今天拿出来当初的ppt回顾了一番，决定再发此文，以跟大家分享。如若有误，欢迎指正～😘
1 、什么是、什么是相对单位?
绝对长度单位，这里边的inch,在移动端比较常见，手机大小都用inch来表示，比如5.1inch。1英寸等于2.54厘米。
相对长度单位在网页设计中用的比较多。
px是pixel的缩写，pixel即像素，确切的说，它不是自然界的长度单位。px就是一张图片中最小的点，一张位图就是由这些点构成的。1024px就是1024像素。
当图片尺寸以像素为单位时，我们需要指定其固定的分辨率，才能将图片尺寸与现实中的实际尺寸相转换。
例如大多数网页制作常用图片分辨率为72，即每英寸像素为72， 1英寸等于2.54厘米。
那么通过换算可以得出每厘米等于28像素，比如15*15厘米长度的图片，等于420*420像素的长度。
2、什么是屏幕尺寸、屏幕分辨率、像素密度 ?
1、屏幕尺寸5.1 指的是手机屏幕对角线的长度。
2、屏幕分辨率1920*1080: 说的是在这个华为p10的5.1英寸屏幕上，在竖向的高度上有1920个像素块，在横向的宽度上有1080个像素块
像素，像素可以理解成一个个色彩小方块。
3、屏幕像素密度：屏幕上每英寸可以显示的像素点的数量，单位是ppi.即‘pixels per inch’的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大。反之越小。最明显的就是iPhone 3GS 和 iPhone 4的区别。屏幕尺寸一样，屏幕分辨率相差一倍，屏幕像素密度也相差一倍。所以，屏幕的清晰程度其实是分辨率和尺寸大小共同决定，用ppi指数衡量屏幕清晰程度更加准确.所以，屏幕尺寸固定，分辨率越高，PPI就越高。
3、什么是ppi、dpi、dp、dip、sp、px？他们之间的关系是什么？
ppi：每英寸可以显示像素点的数量，屏幕像素密度。
dpi: Dots per inch,最初是来衡量打印物上每英寸的点数密度，就是打印机可在一英寸内打印点数。当dpi用在计算机屏幕上时候，ppi.ppi和dpi是同一个概念，Android用dpi，IOS 用ppi。
dip: density independent pixels的缩写，密度独立像素，可以想象成一个物理尺寸，使得同样的设置在不同的手机上显示的效果看起来是一样的。在安卓中，规定用160dpi为基准，1dp=1px。如果密度是320dpi，1dp=2px.以此类推。
sp: Scale independent pixels,用法和dp类似，是专门用来定义文字大小的，受用户安卓设备字体设置的影响。
px: 就是通常所说的像素，是网页设计中使用最多的单位。讲显示器分为非常细小的方格，每个方格就是一个像素。(网页重构中使用的px和屏幕分辨率的px不一定是一样的大小。)
4、什么是mdpi、hdpi、xhdpi、xxhdpi|?如何计算和区分？
像素密度范围，有一般的，高清的，超高清，特别清等等的不同程度的划分。
苹果的区分相对简单一些，只分了三种：非高清屏（dpr=1），高清屏幕(dpr=2)，超高清屏(dpr=3)。
5、什么是dpr?
物理像素（也叫做设备像素）：显示器上的像素，机器生产出来时就已经确定了。
逻辑像素（也叫做css像素）：用于控制元素样式的样式单位像素，CSS像素从来都只是一个相对值。
dpr是 手机的物理像素和实际上使用的像素的缩放比。（ 默认情况下，一个css像素应该等于一个物理像素的，但是浏览器的放大会让一个css等于两个设备像素宽度。在高PPi的设备上，css像素相当于多个物理像素的宽度。）
device pixel ratio = physical pixel/density-independent pixel，它定义了物理像素和设备独立像素的对应关系。
比如，看上边这个图，2x2的CSS像素真的只需要2x2的物理像素，但是右侧高清屏中，2x2的CSS像素却需要4x4的物理像素。
设备像素比也是设备生产的时候设置好的。在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。获得设备像素比后，便可得知设备像素与CSS像素之间的比例，当这个比率为1:1时，使用1个设备像素显示1个CSS像素。当这个比率为2:1时，使用4个设备像素显示1个CSS像素。所以，以此类推，当这个比率为3:1时，使用9（3*3）个设备像素显示1个CSS像素。
👉 设计师和前端工程师直接如何协同合作的呢？
如下所示，素作为单位制作出设计稿，然后前端工程师，参照相关的设备像素比dpr，进行换算和编码。
👉 为什么需要两倍图/多倍图 ？
对于位图而言（位图也叫做点阵图，删格图象，像素图，简单的说，就是最小单位由象素构成的图，缩放会失真）：
- 当一个光栅图像在标准设备下全屏显示时,一位图像素对应的就是一设备像素,导致一个完全保真的显示。因为一个位置像素不能进一步分裂，
- 当在Retina屏幕下时，要将图像放大四倍来保持相同的物理像素的大小，这样就会丢失很多细节，造成失真的情形。换句话说，每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。
例如：
有一张200x200像素的图片（CSS像素，也就是普通像素点或者说是标准像素点），我们给图片设置一个CSS样式： img{width:200px;height:200px;}，固定好css像素，此时在这个width和height 对于不同的显示器包含的像素已经确定了。
然后在两种不同屏幕上放图片：那么Ritina屏幕图片会模糊，因为没有css像素的width height所对应Retina显示器的像素数那么多，你硬生生的把这张图片拉成那么大，必然模糊。
在iPad2或Mini iPad中就是很正常显示的图片。但是，在New iPad中，1个CSS像素点实际上有4个位图像素点，1个分成4个，显然不够分，只能颜色近似选取，于是，图片感觉就是模糊的。
因此，要想让视网膜屏幕下的图片高清晰显示，我们需要的图片的原始大小不能是200×200像素，而需要2倍高宽，即400×400像素，CSS像素限制依然是: img{width:200px;height:200px;}
此时，视网膜屏幕下图片就显示OK了（非视网膜屏幕图片被压缩-减少像素取样—会造成资源浪费！）
👉 通过计算 devicePixelRatio 的值，是可以区分普通显示屏和高清显示器
所以，为了更好的提升用户体验，节省移动端的流量，针对不同的显示屏，我们可以采取不用的方案，保证图片在不同显示屏幕下正常展现，这个方法跟设计原生APP中针对不同分辨率采用使用不同图片的原理相似。
利用媒体查询结合 devicePixelRatio 可以区分普通显示屏和高清显示屏，来加载不同尺寸的图片： 针对普通显示屏(devicePixelRatio = 1.0、1.3)，加载一张1倍的图片针对高清显示屏(devicePixelRatio >= 1.5、2.0、3.0)，加载一张2倍大的图片。
基于现在大部分手机都是高清显示屏（大部分还是2倍屏），所以一般设计稿给的尺寸也都是2倍的，也可以通过上边说的判断去制作3倍图进行加载保证用户更好的体验。
6、viewport
在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的
viewport来对页面进行缩放，并固定不允许用户再重新缩放。
手机浏览器是把页面放在一个虚拟的窗口“viewport”中, 窗口可以大于，或者小于手机的可视区域，一般手机默认viewport大于可视区域。这样不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的其他部分。
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0">
为什么移动端要加这句话呢？看了这个就懂了。
Meta标签 的viewport属性 首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport大小不一的问题，适配各种手机。
Meta里的viewport是layout viewport,是设备出厂就有一个默认值的，要想正确的在手机上展示页面，要设置给这个viewport指定宽度。
看一下content里边对应的值，viewport的width通常会设定为device-width,主要是为了要让页面宽度与手机可视宽度相同，这样就能把页面放在不同机型屏幕上展示页面了。在手机端，我们都希望网页呈现方式固定，不希望用户随便缩放，就要加这些属性设置。
viewport的width通常会设定为device-width？看了这个就懂了。
例如，IPhone 4s如果不设置viewport,它就会默认是980px,就像是把屏幕分成了980份（不是屏幕分辨率640px哦~）。如果设置一个元素是100px*100px.看起来就是屏幕的100/980。
例如，IPhone 4s如果设置viewport width = device-width,它就会是320px,就像是把屏幕分成了320份（也不是屏幕分辨率640px哦~）。如果设置一个元素是100px*100px.看起来就是屏幕的100/320。
7、 自适应适配方案
解析：
Vw,vh是视口（屏幕可视区域）单位
1vw = 375px * 1% = 3.75px
100px / 3.75px = 26.67vw
为什么用100px去除以3.75px呢？
根元素设置为font-size是100px,那么1rem就是100px，一般都是100，为了计算方便，分元素设置100px,750px的设计稿子上给的div高是20px，写的时候20/100/2
1080是三倍屏，100px/3.6 = 27.777777777
若设计稿是基于iphone6的，
8、如何设置高清背景
通过判断device PixelRatio的值来加载不同尺寸的图片
针对普通显示屏（devicePixelRatio = 1.0、1.3），加载一张1倍的图片
针对高清显示屏（devicePixelRatio = 1.5、2.0、3.0），加载一张2倍大的图片
Media Queries 设置高清背景图，如下:
