设备像素比（dpr）：设备物理像素与设备独立像素（CSS像素）的比值。
1.如果页面中的DOM元素的CSS样式设置边框宽度为1px，
（1）对于设备像素比为1的设备，1个设备独立像素对应1个物理像素，则显示在浏览器屏幕上的边框占一个物理像素宽度。
（2）对于设备像素比为2的设备，1个设备独立像素对应2个物理像素，则在浏览器屏幕上的边框占2个物理像素宽度。
显示效果对比图如下：
对于一条1px宽的直线，他们在屏幕上的物理尺寸（灰色区域）的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用css来表示，理论上说是0.5px。然而并不是所有手机浏览器都能识别border: 0.5px;，ios7以下，android等其他系统里，0.5px会被当成为0px处理。
- 1px边框的实现方式
（1）0.5px边框
优点：写法简单
缺点：无法兼容安卓设备、ios8一下设备
（2）设置缩放比例 + rem布局
优点:满足所有场景
缺点：影响范围大
（3）伪类 + transform缩放
优点：满足所有场景
缺点：对于已经使用伪类的元素，需要多层嵌套
网友评论