1px边框问题

设备像素比(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处理。

  1. 1px边框的实现方式
    (1)0.5px边框
    优点:写法简单
    缺点:无法兼容安卓设备、ios8一下设备
    (2)设置缩放比例 + rem布局
    优点:满足所有场景
    缺点:影响范围大
    (3)伪类 + transform缩放
    优点:满足所有场景
    缺点:对于已经使用伪类的元素,需要多层嵌套

你可能感兴趣的:(1px边框问题)