css像素（逻辑像素）、物理像素、dpr到底是什么？_前端dpr

前言

        从事前端开发这么久，没有关注过逻辑像素和物理像素，真的是打脸啊！

一、什么是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);
        }
    }
}

总结

       关于这篇博文，是之前面试问的问题，从来没有思考过，最近闲下来就去了解了一下。参考了另外一个博主的文章，讲的非常清楚，我这边也不赘述了。看这里

        目前处于了解阶段，如果有什么不足之处，或者理解不到位之处，欢迎小伙伴们指出，共同学习进步。私聊和评论都可哦!