标准网站建设哪家便宜,青岛搜索推广排名,长沙做信息seo网站,网站建设哪里好翰诺科技关于物理像素、逻辑像素#xff08;css像素#xff09;、分辨率、像素比的超详细讲解
在日常生活中#xff0c;有这样一个问题。同样的图片为什么在不同的设备上显示的大小是不一样的。#x1f912;带着这个问题来说明一下。
一、物理像素
设备刚生产出来就已经固定了css像素、分辨率、像素比的超详细讲解
在日常生活中有这样一个问题。同样的图片为什么在不同的设备上显示的大小是不一样的。带着这个问题来说明一下。
一、物理像素
设备刚生产出来就已经固定了不容更改的。
二、逻辑像素
在开发的过程中我们所写的css中的px就是逻辑像素。一般在开发的过程中UI工程师将设计稿给我们的就是逻辑像素。
三、像素比
物理像素/逻辑像素。由公式可知像素比就是物理像素与逻辑像素的比值即当前设备将通过几个物理像素点来绘制一个逻辑像素点**。**
通过js可以获取当前设备的像素比
window.devicePixelRatio举个例子
前端工程师现在要画一个2px * 2px的正方形
设备1 像素比为1通过2*2个物理像素点来画的这个正方形
设备2 像素比为2通过2 * 2 * 2,一共8个物理像素点来画的这个正方形。
注意设备2所绘制出的正方形其物理尺寸并不一定比设备1的大因为我们前面提到过物理像素并不是一个固定大小的单位其大小由厂家指定。那么如果设备2和设备1所绘制出来的正方形物理面积相同且设备2用了更多的物理像素点来绘制很显然设备2的显示将更为细腻。
四、分辨率
像素点的总数就是分辨率。例如1000*1000就是1000000个像素点
五、实际开发注意点
在拿到一个设计稿后我们应该比较自己电脑屏幕和设计稿的比值然后再将设计稿的逻辑像素乘以比值转换成我们电脑实际的逻辑像素。
