Web Development Troubleshooting Solutions - Update Anytime

This article is used to record the solutions to some difficult problems encountered during the development of the Web (including PC and mobile terminals).

P1, '1 pixel border' problem

In the usual development process, it is often encountered that the border of the elements in the design draft given by the UI is 0.5px, here 0.5pxrefers to CSS pixels, for a screen with a device pixel ratio of 2, the corresponding physical pixel is 1 pixel. That is to say, the original intention of the design draft is to allow us to achieve a real border occupying 1 physical pixel. Since the direct setting of the corresponding CSS properties 0.5pxis not compatible with various platforms and browsers, many solutions are given on the Internet, and only the most commonly used and proven solutions are listed here.

1. Scaling according to the device pixel ratio transform, often with the help of pseudo elements

div {
    position: relative;
}
div::after {
    content: '';
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    border: 1px solid red;
    transform-origin: 0 0;
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    div::after{
            width: 200%;
            height: 200%;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            /*border-radius: $radius * 2;有圆角*/
    }
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:3){
    div::after{
            width: 300%;
            height: 300%;
            -webkit-transform: scale(.33333);
            transform: scale(.33333);
            /*border-radius: $radius * 3;有圆角*/
    }
}

/**
 * @module 背景与边框
 * @description 为元素添加边框（包括1px边框）
 * @method border
 * @version 2.0.0
 * @param {String} $border-width 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 <2.0.0>
 * @param {String} $border-color 指定边框颜色 <2.0.0>
 * @param {String} $border-style 指定边框样式 <2.0.0>
 * @param {String} $radius 指定边框圆角半径，默认值：null <2.0.0>
 */
 @mixin border($border-width: 1px, $border-color: map-get($base, border-color), $border-style: solid, $radius: null,$opacity: null) {
    // 为边框位置提供定位参考
    position: relative;
    @if $border-width == null {
        $border-width: 0;
    }
    border-radius: $radius;
    &::after {
        // 用以解决边框layer遮盖内容
        pointer-events: none;
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        // fix当元素宽度出现小数时，边框可能显示不全的问题
        // overflow: hidden;
        content: "\0020";
        border-color: $border-color;
        border-style: $border-style;
        border-width: $border-width;
        @if $opacity != null {
            opacity: $opacity;
        }
        // 适配dpr进行缩放
        @media (-webkit-min-device-pixel-ratio:1),(min-device-pixel-ratio:1){
            width: 100%;
            height: 100%;
            @if $radius != null {
                border-radius: $radius;
            }
        }
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
            width: 200%;
            height: 200%;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            @if $radius != null {
                border-radius: $radius * 2;
            }
        }
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
            width: 200%;
            height: 200%;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            @if $radius != null {
                border-radius: $radius * 2;
            }
        }
        @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:3){
            width: 300%;
            height: 300%;
            -webkit-transform: scale(0.33333);
            transform: scale(0.33333);
            @if $radius != null {
                border-radius: $radius * 3;
            }
        }
        -webkit-transform-origin: (0,0);
        transform-origin:(0 0);
    }
}

div {
    position: relative;
    border: none;
}
div:after {
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);/*以dpr = 2为例 */
    transform-origin: 0 0;
}

Reference:
How to draw a 0.5px edge (updated)
and then talk about the 1px solution under Retina