移动端适配的基础知识

先上楼主的图

首先，咱们需要了解以下几个专有名词和单位

这里，我们先来辨析一下在适配的时候经常会遇到的一些名词、数值单位。

首先，先来看一下物理像素。

以iphone6为例，可知道：

分辨率：1334pt x 750pt
指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。

屏幕尺寸：4.7in
注意英寸是长度单位，不是面积单位。4.7英寸指的是屏幕对角线的长度，1英寸等于2.54cm。

屏幕像素密度：326ppi
指的是每英寸屏幕所拥有的像素数，在显示器中，dpi=ppi。dpi强调的是每英寸多少点。同时，屏幕像素密度=分辨率/屏幕尺寸

接着，我们来看一下其他的单位。

设备独立像素：设备独立像素，不同于设备像素（物理像素），它是虚拟化的。比如说css像素，我们常说的10px其实指的就是它。需要注意的是，物理像素开发者是无法获取的，它是自然存在的一种东西，该是多少就是多少。

设备像素比：缩写简称dpr，也就是我们经常在谷歌控制台移动端调试顶端会看到的一个值。设备像素比 = 设备像素 / css像素（垂直方向或水平方向）。可以通过JS来获取：window.devicePixelRatio

链接：demo项目

原文链接：https://segmentfault.com/a/1190000011586301