NOTES: Mobile 1-pixel thin line solution ideas

Recently has been in the Vue Mobile project, every time at the beginning to solve the problem of BORDER:1PX, referring to Daniel's article himself summarized down as a note

Reference:

Zhang Xin Xu: http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

Https://www.cnblogs.com/lunarorbitx/p/5287309.html

Cause:

in the On the Retina screen (Retina is a pixel-compressed screen that compresses more pixels into a single screen for higher resolution , which is always the other screen 2 Times ), so the 1px border is in devicepixelratio Retina on the screen will appear as 2px.

Solution:

1. Reduce the pixel value (example only takes Devicepixelratio to 2, the others are 1.5 and 3, as long as the Devicepixelratio value is multiplied by border-width equals 1)

1 . border_1px{2 Display:Block;3 width:100%;4 Border-top:1px solid Rgba (7,17,27,.1);5}6 7 @media (Min-device-pixel-ratio:2), (-webkit-min-device-pixel-ratio:2){8 . border_1px {
Display:Block;9 width:100%;Ten Border-top:0.5px Solid Rgba (7,17,27,.1);
} One}

　　

　　

NOTES: Mobile 1-pixel thin line solution ideas