We know that there is a classic 1px problem when writing mobile pages. The problem is caused by the visual enlargement of the design draft on the PC terminal to the mobile terminal. The solution to this problem is to reduce 1px to 0.5px.

The solution

1. Write 0.5px directly, incompatible. 2. The scale of the transform. 3. Linear-gradient. 4. SVG. 5. The box – shadow. 6. Viewport in meta.

implementation

The most effective of the above schemes is the transform scale, which is the most commonly used, so let’s see how this is implemented.

     
        .box1 {
            background: none;
            margin-top: 10px;
            margin-left: 200px;
            height: 100px;
            width: 100px;
            border: 0.5px solid #000;
        }

        .box2 {
            position: relative;
            margin: 10px 0 0 200px;
            border: none;
            background: none;
            height: 100px;
            width: 100px;
        }

        .box2::after {
            content: ' ';
            position: absolute;
            border: 1px solid #000;
            top: 0;
            left: 0;
            box-sizing: border-box;
            width: 200%;
            height: 200%;
            transform: scale(0.5);
            transform-origin: left top;
        }

    <div class="box"></div>
    <div class="box1"></div>
    <div class='box2'></div>
Copy the code

Add borders to Box2 using pseudo-elements. Transform-origin: left top; Otherwise the box will shift to the center.



This is the effect on the PC side, does not feel like directly set to 0.5px, but will be thinner. But let’s look at mobile.



On the mobile end, only scaling 0.5 works.

Record the record!