​

Because different phones have different pixel densities. If the resolution of the mobile display is always twice that of the normal screen, a 1px border will look 2px under a devicePixelRatio=2 mobile display, so looking at 1px under a HD bottle always feels fat

I have read articles by other authors that write 0.5px. In theory, the minimum unit is 1px. As a result, some devices write 0.5px inefficiently (without borders).

How do you use the right 1px unit to look 1px on a mobile device?

This article addresses this problem using the scale value of CSS3’s Transform property, which is the most common solution. The 1px(line/border) solution is described in the source code below

Effect comparison (the picture effect has some problems, please copy the source code below to see the final effect)

​

​

The source code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, User-scalable =no"> <meta name="author" content="[email protected]"> <title> Mobile 1px(line/border) solutions </title> <style type="text/css"> body{ margin: 0; padding: 0; font-size: 14px; color: #333; font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif; } /* line */. List {margin: 0 20px; list-style: none; line-height: 42px; padding: 0; } .list>li{ padding: 0; position: relative; }. List >li:not(:first-child):after{/* CSS matches the first direct child */ content: ""; display: block; height: 0; border-top: #999 solid 1px; width: 100%; position: absolute; top: 0; right: 0; The transform: scaleY (0.5); /* Reduce the 1px line to 50% */} /* border */ /* Other authors may want to create border lines by setting 4 edges */. This is not enough code, and it is also very difficult to adjust the rounded corners */. Button {line-height: 42px; text-align: center; margin: 20px; background-color: #f8f8f8; position: relative; border-radius: 4px; } .button:after{ content: ""; position: absolute; top: -50%; right: -50%; bottom: -50%; left: -50%; border: 1px solid #999; The transform: scale (0.5); transform-origin: 50% 50% 0; box-sizing: border-box; border-radius: 8px; /* Size reduced by 50%, </style> </head> <body> <ul class="list"> <li> Line 1px</li> <li> < li > [email protected] < / li > < / ul > < div class = "button" > frame 1 px < / div > < / body > < / HTML >Copy the code

Author: Huanghe Ailang QQ: 1846492969, email: [email protected]

This article is original, copyright belongs to the author, please indicate the original link and source.