前言
从事前端开发这么久,没有关注过逻辑像素和物理像素,真的是打脸啊!
一、什么是css像素、物理像素、dpr
css像素:也叫做逻辑像素,或者独立设备像素;css中的1px就是一个独立设备像素。
物理像素:是指设备屏幕实际拥有的像素点,设备出厂后就不能改变的参数。
dpr:是指物理像素和css像素的的比例。当dpr=1时,说明物理像素和css像素是1:1,此时一个物理像素 == 一个css像素;当dpr = 2时,说明物理像素是css像素的两倍,那么此时4个物理像素显示一个css像素。一般来说,屏幕出厂前都已经设定好了,不可改变。
二、css中的1px等于设备的1px吗?
不等于!除非dpr等于1!
三、1px的物理像素怎么实现?
1)如果dpr = 2, transform:scale(0.5)
2) 媒体查询:
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
.border-bt-1px {
position: relative;
&::after {
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background-color: green;
transform: scaleY(0.5);
}
}
}
总结
关于这篇博文,是之前面试问的问题,从来没有思考过,最近闲下来就去了解了一下。参考了另外一个博主的文章,讲的非常清楚,我这边也不赘述了。看这里
目前处于了解阶段,如果有什么不足之处,或者理解不到位之处,欢迎小伙伴们指出,共同学习进步。私聊和评论都可哦!