2. 从像素开始
• 又称画素，为图像显示的基本单位
• 相对单位

3. 从像素开始
• 1个 pixel 是由一些“sub-pixel”组成

4. 英寸（inch）
• 绝对单位
• 1英寸等于2.54厘米。

5. PPI(Pixels per inch)
(1). 计算对角线像素
(2).计算PPI
•
•
•
•
表示屏幕对角线分辨率(单位：pixel)
屏幕分辨率的宽度(单位：pixel)
屏幕分辨率的高度(单位：pixel)
屏幕对角线长度(单位：inch)

6. 相机像素指的是？

7. Retina display

8. Retina display
•
•
•
其中a代表人眼视角（小于或等于1角分(π/10800 弧度)的情况下，无法看见单个像素点）
h代表像素间距(pixel pitch)，其实就是一个像素的大小，
d代表肉眼与屏幕的距离。

9. Retina display
• 不是第一人

10. Retina display
• 与设备有关

11. Retina 的图片和字体

12. 为什么font-size不需要2倍？

13. 期望“路飞”格式图片

14. Retina需要的是2倍图吗？

15. 可见视口(visual viewport)和 布局视口(layout
viewport)

16. 可见视口(visual viewport)和 布局视口(layout
viewport)
•
Imagine the layout viewport as being a large image which does not change size or
shape. Now image you have a smaller frame through which you look at the large image.
The small frame is surrounded by opaque material which obscures your view of all but a
portion of the large image. The portion of the large image that you can see through
the frame is the visual viewport. You can back away from the large image while holding
your frame (zoom out) to see the entire image at once, or you can move closer (zoom
in) to see only a portion. You can also change the orientation of the frame, but the
size and shape of the large image (layout viewport) never changes.

17. Media query

18. Media query 的是什么？

19. 现实很残酷

20. 需要的是和pixel ratio对应的图片

21. Mobile first ？

22. Mobile first ？
• 看项目
• 看项目
• 看项目

23. THANKS