现象及原因
在移动端开发时，设计图中的1px的边框，如果我们直接在CSS中设置边框的宽度为1px，实际上在设备上显示的并不是1px。这是因为不同的手机有着不同的像素密度，即window.devicePixelRatio属性，它反应的是物理像素与逻辑像素的比值，IPhone6的dpr是2，也就是说，对于IPhone6来说，CSS的1px显示时会显示为2px的像素
当设置为1px的边框时，移动端的显示：
当设置为0.5px的边框时，移动端的显示：
PC端1px的边框：
很明显看出，移动端1px的边框更粗
媒体查询
要想解决这个问题，必须针对不同dpr的设备进行不同的处理，完全不必使用JavaScript，而是可以通过媒体查询实现
&
最低0.47元/天 解锁文章
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
