1px边框问题

问题：ui设计稿中边框为1px，在实际的前端开发，移动端设备中会出现设置border：1px solid #000;出现边框过粗的现象的问题。

答：因为ui设计稿中的边框是物理像素，而css设置的像素是逻辑像素，之间存在比例关系，1px（物理像素）不等于1px（逻辑像素）

一、几个概念

1、device pixels 即设备像素/物理像素

设备产品说明书上所列出的物理像素，设备出厂的时候设置好的，这个值固定不变，也是UI设计师设计稿中显示的像素值

2、css pixels 即逻辑像素

Css/Js理解的像素单位，与设备像素没有必然联系。

3、dpr像素比（设备像素 / CSS像素(某一方向上)）

通过window.devicePixelRatio可获取当前设备的dpr，或者用媒体查询的-webkit-min-device-pixel-ratio来获取当比例为 1：1 时，表示1个物理像素显示一个css像素；当比例为 2：1 时，表示使用4个物理像素显示1个逻辑像素。

4、rem相对单位（相对于根元素的字体大小的单位）

如果不设置根元素的字体大小，则会默认以根元素的16px的大小计算值，假设根元素设置字体大小为16px，则8rem = 8 * 16px = 128px，rem和em的区别在于根据谁来计算值，em是根据使用em单位的元素的字体大小计算值，比如当前div设置字体大小为18px，padding设置为10em，那么此时padding的值就是10 * 18=180px，而rem是根据根元素大小计算值

设置根元素大小，可通过js动态添加：

根据设计稿尺寸大小修改代码

**// rem布局的核心代码。 此例默认UI稿按 1080 * 1920 提供**
(function(win, doc){
    var docEl = doc.documentElement,
        resizeEvt = 'oritationchange' in window ? 'oritationchange' : 'resize',
        recalc = function(){
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth < 550) {
                docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 1920) + 'px';
        }
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DomContentLoaded', recalc, false);
})(window, document)

解决方案

1、通过修改meta中viewport的initial-scale值配合rem来进行缩放

(1)移动端页面初始化头部引入

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

(2)根据当前像素比进行缩放，比如dpr为2的时候，initial-scale就为0.5。同时设置根元素的字体大小，用rem设置元素相对宽高

window.onload = function(){
    let dpr = window.devicePixelRatio
    let scale = 1/dpr
    let metaNode = document.querySelector('meta[name="viewport"]')
    metaNode.setAttribute('content','width=device-width, initial-scale='+scale+',user-scalable=no')
    //元素的宽度高度需反向乘回来
        var docEl = document.documentElement;
        var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
        docEl.style.fontSize = fontsize;
}

2、通过css的方法设置

利用伪元素:before,:after默认设置height: 1px，transform: scale(0.5)，根据媒体查询结合transform缩放为相应尺寸。

.border-bottom::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

3、其他不常用方法

(1)box-shadow，此处颜色较难控制

box-shadow: 水平阴影位置，垂直阴影位置，模糊距离， 阴影尺寸，阴影颜色，将外部阴影改为内部阴影;

div {
    -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

(2)border-image

通过图片裁剪的方式

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("border.png") 2 0 stretch;
    border-image: url("border.png") 2 0 stretch;
}

(3)background-img渐变

思路就是设置1px的渐变背景，然后50%的颜色到50%的透明的延伸，此处无法设置圆角

linear-gradient(渐变旋转角度，渐变开始的颜色，哪个颜色到百分比的位置，以此类推)

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

参考资料

https://www.jianshu.com/p/fa670b737a29
https://blog.csdn.net/SilenceJude/article/details/81906716