移动前端开发进阶之路—页面布局

Viewport

移动Web开发自然要从Viewport说起,那什么是Viewport呢?字面意思是视图窗口,通俗的讲就是指移动设备上能用来显示页面的那部分区域。

设备像素

对于设备来说,有两个设备像素:物理像素和独立像素。物理像素:是指设备显示屏中使用的最小显示单位,也就是屏幕分辨率独立像素:Web编程种的逻辑像素,也就是CSS像素。

像素密度

PPI(pixels per inch)用来表示设备每英寸所拥有的物理像素数目。这个数值越高,我们看到的屏幕越清晰。

设备像素比

DPR(Device Pixel Ratio)是指物理像素和CSS像素的比例。在javascript中,可以通过window的devicePixelRatio 属性来获取当前设备的DPR,如下:

布局形式



你可能感兴趣的:(移动前端开发进阶之路—页面布局)