The problem

  • The reason why 1px border appears on the mobile end
  • What are the solutions

It is necessary to understand the principle of REM layout

Rem unit, so that the size of all child elements is calculated according to the font size of the HTML element. Therefore, as long as the rem size can be changed to achieve the adaptation of various models.

  1. The CSS is used to calculate the media query width and the pixel ratio of the device
  2. Calculate the ratio of deviceWidth to designWidth based on JS and listen for resize or ready events. Suppose the width of the design is 750, which is reflected in JS:
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px'; 
Copy the code

Due to the limitation of the minimum font size of the browser and the convenience of CSS calculation, it is generally used to enlarge the root font by 100 times, that is:

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; 
Copy the code

Rem also needs to be 100 times smaller. Or set:

body {
    font-size: 100rem;
}
Copy the code

There are a lot of options, but this is just one of the simpler options.

Refer to the link

Juejin. Cn/post / 684490… Juejin. Cn/post / 684490…

The reason why 1px border appears on the mobile end

  1. Assume that the width of the design is 750px, and the physical pixel displayed on the design is 1px. While we are writing in logical pixels, in the case of a non-1 DPR, the rendered physical pixels are larger than 1px on the design. Hence the 1px problem.
  2. Why not write 0.5px, because rendering is inconsistent across browsers. Or browser support is inconsistent. Not recommended.
  3. 1px is essentially the smallest unit used for rendering. Therefore, using DPR to calculate border is just to restore the design diagram and improve user experience.

Refer to the link

Zhuanlan.zhihu.com/p/100752129 juejin. Cn/post / 684490… Segmentfault.com/a/119000001…

What are the solutions

The solution

  1. Transform: Scale (1/ DPR) is implemented using pseudo-elements

    With media query implementation, namelydevice-pixel-ratio.Compatibility with Corresponding Browsers. It’s worth noting that,device-pixel-ratioIs a non-standard property and therefore requires a corresponding browser prefix. The current standard attribute isresolution, corresponding toMDN. Less or SCSS can extract this method into a public method for use in development. lessAnt Desigin Mobile implementation.

    Note: Pay attention to the Settingstransform-origin
  2. Use images (not recommended). My understanding of CSS is that any effect that can be implemented using CSS native properties does not use images, except in extreme cases where there are significant compatibility issues.
  3. Use color trickery. A light boder is thinner than a dark one.

Other Solutions

Set the zoom ratio of the meta tag based on the DPR. This scenario requires changing the font size of the root node and the viewport. Mobile phone Taobao scheme.

the end