布局视口
在PC端，布局视口就是浏览器窗口
视口的宽度 = 浏览器窗口的宽度
通过以下JavaScript代码获取布局视口的宽度和高度：
document.documentElement.clientWidth
document.documentElement.clientHeight
视觉视口
理想视口
<meta name="viewport" content="width=device-width" />
上面代码中的 width 指的是布局视口的宽，device-width 实际上就是理想视口的宽度。
width=device-width这段代码是让布局视口的尺寸等于理想视口。
设备像素比
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)
移动端的 psd 原稿的尺寸是按照设备像素设计的
CSS 中的样式是基于布局视口的尺寸计算的
设备像素 = 设计图尺寸 ＝ 750px
布局适口＝ 理想视口 ＝ 浏览器手机模式里面的手机尺寸 = 375px
