Make writing a habit together! This is the fourth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

why

CSS 1px is 1px on PC; On mobile it is usually greater than 1pxcss 1px on PC is 1px; On mobile, it’s usually more than 1px

The first way

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Width =" device-width, initial-scale=1.0"> < span style> body {margin:0; padding:19px} div { padding:1em; margin:1em; } .box1{border-top: 1px solid #000; } .box2{border-bottom:1px solid #000; } </style> </head> <body> <div class="box1"> 1px </div> <div class="box2"> 0.5px </div> </body> </ HTML >Copy the code

Cause of occurrence

  • DevicePixelRatio: DPR =window.devicePixelRatio, which is the ratio of physical pixels to logical pixels of the device.
  • inretinaScreen on my phone,dprfor2or3.cssWriting in the1pxThe width is mapped to a physical pixel2pxor3pxWidth.
  • Such as:iPhone6thedprfor2, the physical pixel is750(X-axis), its logical pixels are375. In other words, 1 logical pixel atxAxis andyIn the axial direction, two physical pixels are required for display. That is, when DPR =2, one CSS pixel consists of four physical pixels.

The solution

Implementation principle: pseudo-element + Transform scaling

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Width =" device-width, initial-scale=1.0"> < span style> body {margin:0; padding:19px} div { padding:1em; margin:1em; } .box1{border-top: 1px solid #000; } .box2{position: relative; border-bottom:1px solid #000; } .box2::after{ content:''; position: absolute; left:0; top:0; width: 100%; height: 1px; background-color: #000; The transform: scaleY (0.5); } </style> </head> <body> <div class="box1"> 1px </div> <div class="box2"> 0.5px </div> </body> </ HTML >Copy the code

Pseudo-elements ::after or ::before are independent of the current element and can be scaled independently without affecting the scaling of the element itself

Advantages: Supports rounded corners in all scenarios (border-radius is required for both pseudo-classes and ontology classes).

Disadvantages: Also a lot of code and may require multiple layers of nesting for elements that already use pseudo-classes (such as Clearfix).

The second way

By setting the rem reference value of the corresponding viewport, this method can write 1px as easily as before. Set meta when devicePixelRatio=2:

<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
Copy the code

Set meta when devicePixelRatio=3:

< meta name = "viewport" content = "width = device - width, initial - scale = 0.3333333333333333, the maximum - scale = 0.3333333333333333, Minimum - scale = 0.3333333333333333, user - scalable = no ">Copy the code

Example:

<! DOCTYPE HTML > < HTML lang="en"> <head> <title> mobile 1px </title> <meta http-equiv=" content-type "Content ="text/ HTML; charset=UTF-8" /> <meta name="viewport" id="WebViewport"content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <style> html { font-size: 11px; } body { padding: 1rem; } * { padding: 0; margin: 0; } .item { padding: 1rem; border-bottom: 1px solid gray; The font - size: 1.2 rem; } </style> <script> var viewport = document.querySelector("meta[name=viewport]"); var dpr = window.devicePixelRatio || 1; var scale = 1 / dpr; SetAttribute ("content", + "width=device-width,") + "initial-scale=" + scale + ", maximum-scale=" + scale + ", minimum-scale=" + scale + ", user-scalable=no" ); var docEl = document.documentElement; var fontsize = 10 * (docEl.clientWidth / 320) + "px"; docEl.style.fontSize = fontsize; </script> </head> <body> <div class="item">border-bottom: 1px solid gray; </div> <div class="item">border-bottom: 1px solid gray; </div> </body> </html>Copy the code

Advantages: All scenarios can be satisfied, one set of code, can be compatible with all basic layouts. Disadvantages: the old project modification cost is too large, only applicable to the new project.