移动端页面开发

布局视口

在PC端,布局视口就是浏览器窗口

视口的宽度 = 浏览器窗口的宽度

通过以下JavaScript代码获取布局视口的宽度和高度:

document.documentElement.clientWidth
document.documentElement.clientHeight

视觉视口

移动端页面开发_第1张图片

理想视口


上面代码中的 width 指的是布局视口的宽,device-width 实际上就是理想视口的宽度。

width=device-width这段代码是让布局视口的尺寸等于理想视口。

设备像素比

设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数(device-width)

移动端的 psd 原稿的尺寸是按照设备像素设计的

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

设备像素 = 设计图尺寸 = 750px

布局适口= 理想视口 = 浏览器手机模式里面的手机尺寸 = 375px

你可能感兴趣的:(移动端页面开发)