The effect

To implement a pixel line on the mobile end,

Window. DevicePixelRatio = Physical pixels /CSS pixels The current mainstream screen DPR=2 or 3. For a 2x screen, the physical pixel of the device needs to be 1 pixel and the DPR=2, so the CSS pixel can only be 0.5. The normal design is based on 750, and the 1px on it is based on 750, while the CSS style is based on device 375, so we should write 0.5px

First look at the results:

Chrome PC

Chrome mobile

An error is displayed in Internet Explorer

The implementation code

<div class="wrap">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
</div>
Copy the code

1, 0.5 px

. Box1 {width: 0.5 px; height: 100px; border-right: black 1px solid; }Copy the code

2, the transform: scaleX (0.5);

.box3 { width: 1px; height: 100px; position: relative; } .box3:after { content: ''; position: absolute; width: 1px; width: 2px\0; height: 100%; top: 0; right: 0; - its - transform: scaleX (0.5); Moz - transform: scaleX (0.5); - o - transform: scaleX (0.5); The transform: scaleX (0.5); -webkit-transform-origin: left top; -moz-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; background: black }Copy the code

3. Use 0.5px line images

.box4 { width: 1px; height: 100px; position: relative; } .box4:after { content: ''; position: absolute; left: 0; width: 100px; height: 1px; background: url('.. /assets/imgs/ problems && solutions /xian.png') 0 0 repeat-x; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transform-origin: left top; -moz-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; }Copy the code

The problem

2. Use Transform: scaleX(0.5) to implement a display problem in IE

Figure: The third line can not be displayed

Resolve transform method compatibility

1. Media query min-device-pixel-ratio

To judge by min-device-pixel-ratio, if the pixel ratio of the device is greater than 2, set transform: scaleX(0.5);

.box5 { width: 1px; height: 100px; position: relative; } .box5:after { content: ''; position: absolute; width: 1px; height: 100%; top: 0; right: 0; background: black } @media only screen and (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { .box5:after { content: ''; position: absolute; width: 1px; height: 100%; top: 0; right: 0; - its - transform: scaleX (0.5); Moz - transform: scaleX (0.5); - o - transform: scaleX (0.5); The transform: scaleX (0.5); -webkit-transform-origin: left top; -moz-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; background: black } }Copy the code

2. Media query max-width

ScaleX: scaleX(0.5); scaleX: scaleX(0.5); scaleX: scaleX(0.5); scaleX: scaleX(0.5); scaleX: scaleX(0.5)

.box6 { width: 1px; height: 100px; position: relative; } .box6:after { content: ''; position: absolute; width: 1px; height: 100%; top: 0; right: 0; background: black } @media screen and (max-width: 800px) { .box6:after { content: ''; position: absolute; width: 1px; height: 100%; top: 0; right: 0; - its - transform: scaleX (0.5); Moz - transform: scaleX (0.5); - o - transform: scaleX (0.5); The transform: scaleX (0.5); -webkit-transform-origin: left top; -moz-transform-origin: left top; -moz-transform-origin: left top; -o-transform-origin: left top; transform-origin: left top; background: black } }Copy the code

expand

Other mobile 1PX solutions

  • box-shadow
  • Set the scale of the viewport