2 -【实战经验】css实现物理像素1px

[minjs1cn]

移动端高清屏，在解析1px像素的时候，实际绘制的物理像素可能为1/2/3，请用css实现1物理像素

参考： https://blog.csdn.net/aiolos1111/article/details/51880223 https://www.cnblogs.com/lunarorbitx/p/5287309.html

[minjs1cn]

基础知识

逻辑像素：CSS像素是没有实际大小的抽象单位，它是一个相对长度，它相对的是电脑或手机显示器的分辨率 物理像素： 在同一个设备上，它的物理像素个数是固定的，这是厂商在出厂时就设置好了的————即一个设备的分辨率是固定的 DPR：设备物理像素和设备独立像素的比例，即：devicePixelRatio = 物理像素 / 独立像素(逻辑像素)。

解决方案

小数

.border { border: 1px solid #999 }
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .border { border: 0.5px solid #999 }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
    .border { border: 0.333333px solid #999 }
}

参考： https://www.cnblogs.com/lunarorbitx/p/5287309.html https://blog.csdn.net/aiolos1111/article/details/51880223 https://www.cnblogs.com/lunarorbitx/p/5287309.html https://blog.csdn.net/aiolos1111/article/details/51967744

[minjs1cn]

https://www.cnblogs.com/webspace/p/8625464.html