css 移动端1px问题及解决
1、问题原因:移动设备推出一个设备像素⽐:dpr=window.devicePixelRatio,也就是设备的物理像素与逻辑像素的⽐值。在retina屏的⼿机上, dpr为2或3,css⾥写的1px宽度映射到物理像素上就有2px或3px宽度。
2、解决方法:border-image实现、background-image实现、box-shadow模拟边框、伪元素+transform、用JS计算rem基准值和viewport缩放值
1、问题原因:移动设备推出一个设备像素⽐:dpr=window.devicePixelRatio,也就是设备的物理像素与逻辑像素的⽐值。在retina屏的⼿机上, dpr为2或3,css⾥写的1px宽度映射到物理像素上就有2px或3px宽度。
2、解决方法:border-image实现、background-image实现、box-shadow模拟边框、伪元素+transform、用JS计算rem基准值和viewport缩放值