1px problem of mobile terminal

problem

css Minimum support only 1px size , Insufficient 1px So 1px Show , So at the mobile end , according to UI Design draft , When adapting to various screen resolutions , Width and height at this peak , There will be a feeling that the actual result is coarser than the design draft .

Often embodied as ： Multiple design drawings designed 1px Border , When zooming out on your phone , because css At least, only display 1px size , The result is that the border is too thick .

Solution

adopt transform: scale() The zoom

unilateral

Such as ： Under the frame

.div::after {
    
	content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    border-bottom: 1px solid #bfbfbf;
    transform: scaleY(1/2);
    transform-origin: left bottom;
}

If you need to add other borders , It can be used before Pseudo elements plus , Such as adding a right border ：

.div::before {
    
	content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    width: 2px;
    height: 100%;
    border-right: 1px solid #bfbfbf;
    transform: scaleX(1/2);
    transform-origin: right bottom;
}

All sides

In this way, you can add border fillets ：

 .div::after {
    
    content: '';
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 300%;
    height: 300%;
    border: 1.5px solid #bfbfbf;
    transform: scale(1/1.5/2);
    transform-origin: left top;
    border-radius: 6px;
}

Be careful

• Give the goal first div Element add non static Of position attribute , Because the above methods are implemented by using pseudo element location
• Concrete scale The scaling depends on how many times the size of the design drawing you are 1px, For example, a double graph (750px) Under size , The scale is 1/2（ On the blackboard ：scale Zoom scale and dpr irrelevant ）
• The regular code on the Internet will have the problem that the borders of individual Android models are not displayed , My own code has done all kinds of compatibility processing ： Unilateral solutions give pseudo elements 1px The height or width of the content area , Add a border to it 2px; All sides are based on 1.5px Border width to zoom .

Reference resources

1px Pixel problem （ One ）： The real reason

1px Pixel problem （ Two ）： resolvent

About multiple graphs