移动端页面开发

布局视口

在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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容