search

极细边框（1px边框）实现方式

移动端 web开发遇到的问题：UI稿上要求设置边框为1px，css设置border: 1px solid #eee;之后，UI又说边框太粗了。

这是因为devicePixelRatio特性导致。css设置的1px是css像素，而UI稿上指的是设备像素，它们之间存在一个比例关系，即，devicePixelRatio。iPhone的devicePixelRatio == 2，而border-width: 1px描述的是css像素，所以，border被放大到物理像素2px显示，在iPhone上就显得较粗。

hashtag
像素基本概念（术语）

device pixel / physical pixel （设置像素、物理像素、硬件像素）： 显示屏中最小的物理单元。 移动设备出厂时，不同设备自带的不同像素，每个像素点根据操作系统的指示设置自己的颜色和亮度。

density-independent pixel(DIP)（设备无关像素或密度无关像素）：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素，然后由相关系统转换为物理像素。

**CSS pixel （css 像素）：**浏览器使用的抽象单元，用于精确地，一致地在网页上绘制内容。 通常，CSS 像素被称为与设备无关的像素（DIP）。

**devicePixelRatio（设备像素比）：**物理像素和逻辑像素的比例关系，通常可以通过js的 window.devicePixelRatio 来获取。

devicePixelRatio可以用来区分视网膜设备还是非视网膜设备。

devicePixelRatio 值为 1 的屏幕称之为标准屏（也称，非视网膜屏）；目前，大部分移动设备都是高清屏（也称，视网膜屏），即 devicePixelRatio 值大于 1 的屏幕，对于苹果设备来说，我们经常听到 Retina屏（视网膜屏），其中 iPhone6/6s/7 的 devicePixelRatio 值为 2；而 iPhone6 plus/6s plus/7 plus 的 devicePixelRatio 值为 3。

hashtag
设置0.5px边框

**优点：**实现简单

缺点：retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和之前版本，OS X Mavericks 及以前版本，还有 Android 设备。

//判断手机是否支持0.5px
if (window.devicePixelRatio && devicePixelRatio >= 2) {
    var divElem = document.createElement('div')
    divElem.style.border = '.5px solid transparent'
    document.body.appendChild(divElem)
    if (divElem.offsetHeight == 1) {
        document.querySelector('html').classList.add('hairlines');
    }
    document.body.removeChild(divElem);
}


//在html中，加上此样式
.hairlines {
    *:not(table tr td),
    *:not(.noHairlines) {
        border-width: 0.5px!important;
    }
}

hashtag
box-shadow（阴影）

**优点：**可以设置圆角

**缺点：**颜色不好控制

hashtag
border-image（边框背景图片）

使用的图片是2px高，上部的1px颜色为透明，下部的1px使用视觉规定的border的颜色。

优点：

**缺点：**修改颜色麻烦，需要替换图片；圆角需要特殊处理，并且边缘会模糊。

hashtag
background-image 渐变

**缺点：**不能实现圆角。

hashtag
transform: scale(0.5) （推荐，相当灵活）

hashtag
viewport+rem

**优点：**可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难、圆角阴影失效问题。

**缺点：**样式必须用rem为单位

hashtag
常见问题

hashtag
细边框显示不全

原因： 未确定。可能与元素的高度、行高及像素的小点有关

解决方法：

  1. 上边框被遮住：如果样式中有 position: absolute； top：50% ，可以尝试把改成 top: 51%。

  2. 尽量不要使用display: inline-block，改用display: block。

  3. 将0.5px改为0.7px。

  4. 指定高度、行高（如：line-height: normal）。

hashtag
参考链接

移动web 1像素边框 瞧瞧大公司是怎么做的arrow-up-right

上一页Node.Js：Readline（逐行读取）下一页如何监控前端异常？

最后更新于