Responsive page layout with rem

The design draft given by the designer to the front end is generally based on the iphone6 ​​screen (iphone6 ​​double screen

equipment	Resolution (physical size)	screen width	PPI	Status bar height	navigation bar height	Tab bar height
iPhone6	750×1334 px	375×667px	326PPI	40px	88px	98px

) the actual size of the annotation, how can we restore the design draft 1:1 on as many screens as possible?

        Nowadays, the most commonly used method is rem, (rem is a unit of size, a unit relative to the font size of the root node).

        For example, a label in the design draft is 30px wide (iphone6), when we actually write the style, it should be 15px (double the screen will enlarge our 15px to the actual 30px, in other words: fill 30 pixels into the 15px width) .

        In this way, the style we wrote on the design draft on the iphone6 ​​is consistent with the design draft on the iphone6 ​​mobile phone, so how can we keep the style in this proportion on other mobile phone screens to adapt?

        We only need to change the font-size of the root node on the corresponding mobile phone screen, so that other layouts in the page will still be displayed in proportion to the design draft.

In practice, in order to facilitate the conversion of units, it is customary to set the font-size of the root node in iphone6 ​​to 100px.

You can refer to the way to set the root node size in our service account, as follows:

const winW = (document.documentElement.clientWidth || document.body.clientWidth) / 3.75; 
document.documentElement.style.fontSize = `${winW}px`; 
// When the page size changes, re-correct rem to a new window 1 /3.75 of the size 
window.onresize = function resize() { 
  let wid = document.documentElement.clientWidth || document.body.clientWidth; 
  if (wid > 1024) { 
    wid = 1024; 
  } else if (wid < 320) { 
    wid = 320; 
  } 
  wid /= 3.75; 
  document.documentElement.style.fontSize = `${wid}px`;