移动开发知识

移动开发的页面越来越多,然而关于页面尺寸、适配的问题也是我们经常遇到的,我也是出于混乱状态,在网上也看到了很多博客,越看月有些凌乱,所以就自己整理一下有关移动开发的知识

一、像素

什么是像素?

像素就是图像元素(picture element),即一个像素就是计算机屏幕所能显示一种特定颜色的最小区域

像素分为两类:

1、设备像素(device pixel):指的就是设备的物理像素,对于任何一个设备他的物理像素的个数是不变的。

2、css像素:这是一个抽象的概念,是专门为我们web开发提供的。

设备像素和css像素两者的关系:在缩放比例为1:1的前提下。

1、在PC端的浏览器下,一个css像素对应一个device-pixel。

2、在移动端的情况下,会具体根据屏幕的特性(比如dpr),一个css像素对应的device-pixel的个数是不固定的。比如苹果的Retina视网膜屏幕,一个css像素横跨多个device-pixel。

总结:

1、像素分为设备像素和css像素

2、一个css像素大小是可变的。比如缩放页面比例等。但设备像素是不会变的。

二、屏幕分辨率和屏幕尺寸

我们生活中买电视、笔记本经常会听到分辨率,那么什么是分辨率?

定义:比如1920 x 1080  的分辨率,就是在一个移动设备中,纵向有1920个物理像素块,横向有1080个像素块。

屏幕尺寸就是屏幕对角线的长度,比如通常我们说的5.5的屏幕对角线长度就是5.5英寸。


三、PPI 和 DPR

1、PPI(pixel per Inch) 每英寸像素数量,也称屏幕像素密度。PPI 怎么计算呢?



2、以上计算出ppi是为了得到密度分界,获得默认缩放比例,即设备像素比DPR(device pixel ratio)

    由上图可知,ppi在120-160之间的手机被归为低密度手机,160-240被归为中密度,240-320被归为高密度,320以上被归为超高密度(Apple给了它一个高大上的名字——Retina)。

    获得设备像素比后,便可得知设备像素与CSS像素之间的比例。当这个比率为1:1时,使用1个设备像素显示1个CSS像素。当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用9(3*3)个设备像素显示1个CSS像素。

而  CSS像素 =设备独立像素 = 逻辑像素

比如做inpone的设备像素是750x1334,这就是UI需要设计的psd的大小,而前端人员需要根据dpr进行css像素的换算。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容