一、像素 - 什么是像素

像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。

在web前端开发领域，像素有以下两层含义：

  1. 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。
  2. CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。
    如下图，是在缩放比例为1，即scale = 1的情况下，设备像素和CSS像素示意图

当你给元素设置了 width: 200px 时，这个元素的宽度跨越了200个CSS像素。但是它并不一定跨越200个设备像素，至于会跨越多少个设备像素，就取决于手机屏幕的特性和用户的缩放了

苹果手机的视网膜屏幕，是一个高密度屏幕，它的像素密度是普通屏幕的2倍，所以当我们设置 width: 200px; 时，200个CSS像素跨越了400个设备像素

如果用户缩小页面，那么一个CSS像素会明显小于一个设备像素，这个时候 width: 200px; 这条样式中所设置的200个CSS像素跨越不了200个设备像素，如下图：

让我们来做一个总结

  1. web前端领域，像素分为设备像素和CSS像素
  2. 一个CSS像素的大小是可变的，比如用后缩放页面的时候，实际上就是在缩小或放大CSS像素，而设备像素无论大小还是数量都是不变的。

二、移动端的三个视口

你一定写过这样一条样式：width: 25%; 但是你有想过给一个元素加上这样一条样式之后发生了什么吗？25%是基于谁的25%？明白的同学可能知道了：一个块元素默认的宽度是其父元素的100%，是基于起父元素的，所以25%指的是父元素宽度的25%，所以，body元素的默认宽度是html元素宽度的100%，那么你有没有想过html元素的宽度是基于谁的呢？这个时候，就要引出一个概念：初始包含块和视口了

记住一句话：视口是html的父元素，所以我们称视口为初始包含块。 这样你就明白了，html元素的百分比是基于视口的。

第一个视口：布局视口

在PC浏览器中，视口只有一个，并且 视口的宽度 = 浏览器窗口的宽度

在移动端，视口和浏览器窗口将不在关联，实际上，布局视口要比浏览器窗口大的多(在手机和平板中浏览器布局视口的宽度在768~1024像素之间)

可以通过以下JavaScript代码获取布局视口的宽度和高度：
document.documentElement.clientWidth
document.documentElement.clientHeight

第二个视口：视觉视口

视觉视口可能要更好理解一些，他就是用户正在看到网站的区域，如下图：
window.innerWidth

第三个视口：理想视口

device-width 的值就是理想视口的宽度
理想视口的尺寸是不能改变的，由设备和浏览器决定，与设备的物理像素数存在着比例关系，这个比例就是设备像素比


上面那段代码告诉浏览器：将布局视口的宽度设为理想视口。所以，上面代码中的width指的是布局视口的宽 device-width 实际上就是理想视口的宽度。
screen.width

可以使用 window.devicePixelRatio 获得dpr

缩放比例也有默认的值，没有设置 initial-scale 时，浏览器会取适当的缩放比例使 布局视口正好铺满屏幕即有 布局视口尺寸 = 视觉视口尺寸

设计稿的宽换算为以 rem 为单位的 css 长度应为 (750/100) rem，同时设计稿的宽对应可视视口的宽，即有 (750/100) rem = 可视视口宽，1 rem = 可视视口宽 * (100/750)，(100/750)就是我们要的系数

好了，移动端的三个视口介绍完了，让我们总结一下：
1、在PC端，布局视口就是浏览器窗口
2、在移动端，视口被分为两个：布局视口、视觉视口。
3、移动端还有一个理想视口，它是布局视口的理想尺寸，即理想的布局视口。（注：理想视口的尺寸因设备和浏览器的不同而不同，但这对于我们来说无所谓）
4、可以将布局视口的宽度设为理想视口

三、设备像素比(DPR)

下面你还需要了解一个概念，设备像素比(Device Pixel Ratio 简称：DPR)。
下面是设备像素比的计算公式
公式成立的大前提：（缩放比例为1）
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)

与理想视口一样，设备像素比对于不同的设备是不同的，但是他们都是合理的，比如早起iphone的设备像素是320px，理想视口也是320px，所以早起iphone的DPR=1，而后来iphone的设备像素为640px，理想视口还是320px，所以后来iphone的DPR=2

  1. 首先要看 PSD 原稿的尺寸，如果是 750 说明是按照设备像素设计的，如果是 375 说明是按照理想视口设计的

  2. width=device-width 这段代码是让布局视口的尺寸等于理想视口。根据公式(缩放比例为1)：设备像素比（DPR） = 设备像素个数 / 理想视口像素个数（device-width）因为iPhone6的DPR（设备像素比）为2，设备像素为750，所以iPhone6的理想视口尺寸为375px。所以上面代码最终导致的是：使我们布局视口的宽度变成了375px。

    1
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />

  3. CSS中编写的样式尺寸是基于布局视口计算的

如果我们能将布局视口的尺寸设置为和设备像素尺寸相等的话，这样我们就保证了设计图与页面的1:1关系，那么我们就可以直接使用psd中测量的尺寸了，然后在其他尺寸的手机中，我们进行等比缩放就ok了。