Implementation of extremely thin border (1px border)

Mobile terminalwebProblems encountered in development: the UI draft requires setting the border to1px, CSS settingsborder: 1px solid #eee;After that, the UI said the border was too thick.

that is becausedevicePixelRatioThis is caused by the characteristics. CSS settings1pxyesCSS pixelAnd the UI draft refers toDevice pixelThere is a proportional relationship between them,devicePixelRatio. IPhonedevicePixelRatio == 2, andborder-width: 1pxIt describes CSS pixels, so,borderIs magnified to physical pixels2pxDisplay, iniPhoneIt’s thicker on the surface.

Pixel basic concepts (terminology)

Device pixel / physical pixel: The smallest physical unit in the display. When mobile devices leave the factory, different devices have different pixels. Each pixel sets its own color and brightness according to the instructions of the operating system.

Density independent pixel (DIP)It can be said thatA point in computer coordinate systemThis point represents a virtual pixel that can be used by the program and then converted into a physical pixel by the relevant system.

CSS pixel:The abstract unit used by the browser to accurately and consistently draw content on a web page. In general,CSS pixels are called device independent pixels (DIP)。

Devicepixel ratio:The proportional relationship between physical pixels and logical pixels can be determined byjsOfwindow.devicePixelRatioTo get it.

devicePixelRatioIt can be used to distinguish between retinal devices and non retinal devices.

devicePixelRatioA screen with a value of 1 is called a standard screen (also known as a non retina screen); at present, most mobile devices are high-definition screens (also known as retina screens), that isdevicePixelRatioScreens with a value greater than 1 are often heard for Apple devicesRetinaScreen (retina screen), in which iPhone6/6s/7OfdevicePixelRatioThe value is 2; and iPhone6 plus/6s plus/7 plusOfdevicePixelRatioThe value is 3.

Set 0.5px border

advantage:Simple implementation

Disadvantages:retina Screen browser may not know0.5pxIt will be interpreted as0px, without borders. include iOS 7And previous versions,OS X MavericksAnd previous versions, andAndroid Equipment.

//Judge whether the mobile phone supports 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);
}


//In HTML, add this style
.hairlines {
    *:not(table tr td),
    *:not(.noHairlines) {
        border-width: 0.5px!important;
    }
}

Box shadow

advantage:You can set fillets

Disadvantages:The color is not easy to control

.border-1px {
    box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

Border image (border background image)

The pictures used are2pxHigh, upper1pxThe color is transparent, and the lower part is transparent1pxUse visual prescribedborderIt’s the same color.

advantage:

Disadvantages:It’s troublesome to modify the color, so we need to replace the image; the fillet needs special treatment, and the edge will be blurred.

.border-image-1px {
    border-width: 1px 0px;
    border-image: url("data:image/png;base64,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") 2 0 stretch;
}

Background image gradient

Disadvantages:Fillet cannot be achieved.

.border-1px {
    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;
}

Transform: Scale (0.5) (recommended, quite flexible)

/*Height: 1px, and then set transform: Scaley (0.5) according to the media query*/
.border-1px {
    height:1px;
    background:#000;
    transform: scaleY(0.5);
    transform-origin:0 0;
    overflow: hidden;
}

/*Pseudo class:: after and:: befor, set border bottom: 1px solid # 000, and then scale transform: Scaley (0.5), which can meet the needs of two sidelines*/
.border-1px:after,
.border-1px::after {
    content:'';
    width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);
}

/*Pseudo class: after set border: 1px solid # 000; width:200%;  height:200% , and then scale (0.5); the advantage is that it can round corners, but the disadvantage is that it is troublesome to add active button. */
.border-1px:after,
.border-1px::after {
    content: '';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    transform: scale(0.5,0.5);
    transform-origin: top left;
}

viewport+rem

advantage:It can adapt to all kinds of known mobile phone screens, and there is no difficulty in color changing and corner shadow failure existing in other methods.

Disadvantages:Style must be in rem

var viewport = document.querySelector("meta[name=viewport]");  
//Here is how to set the viewport based on the device pixels  
if (window.devicePixelRatio == 1) {  
    viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');  
}  
if (window.devicePixelRatio == 2) {  
    viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');  
}  
if (window.devicePixelRatio == 3) {  
    viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');  
}  
var docEl = document.documentElement;  
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';  
docEl.style.fontSize = fontsize;

common problem

Incomplete display of thin border

reason: undetermined. It may be related to the height of the element, the height of the line and the small point of the pixel

resolvent：

Top border obscured: if there are position: absolute； top：50%You can try to change it totop: 51%。
Try not to use itdisplay: inline-block, usingdisplay: block。
take0.5pxChange to0.7px。
Specify height, row height (e.gline-height: normal）。

Reference link

Mobile web 1 pixel border to see how big companies do it