本节书摘来异步社区《高性能响应式Web开发实战》一书中的第2章,第2.4节,作者: 李光毅 责编: 杨海玲,更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.4小结
本章的开头首先了解了关于屏幕PPI的定义,并引出了设备像素这个概念。虽然像素密度越高,能够表现的图像越细腻。但是,这一特性也需要开发者提供更高清的素材来支持,否则素材会显得模糊不堪。
随后提出了CSS像素的这个概念,并且梳理了CSS像素与设备像素之间的异同。通过CSS像素,能部分解决PPI在Web开发中的缺陷。
最后我们介绍了桌面端浏览器与移动设备浏览器在渲染页面时的差异,由此引出了视口(viewport)的概念,并学习了在移动浏览器上如何手动控制视口。
本书接下来的几章内容都与这些概念有关。例如,针对不同PPI设备,讨论如何为不同设备提供不同清晰度的图片;又如,示范如何获取视口的宽度,使用什么样的策略为不同视口设备提供不同样式的布局。