移动端页面开发

布局视口

在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