1. Px pixels. It’s like absolute units. It’s actually relative units, relative to the resolution of the screen;

  2. Pt pound point printing size

  3. Font size = parent font size (direct parent)

  4. Rem relative to the HTML font size of the root element 1rem= the font size of the root element, which means that we only need to specify a reference value for the root element. This reference value is entirely up to you. Font size=100px = 1rem=100px = 1rem=100px

  5. Vw, relative to the width of the screen, 1vw==1% of the width of the screen

  6. Vh relative to the height of the screen, 1vh==1% of the height of the screen

CSS version

If the width of the UI is 1920px, and vw will divide the width into 100 pieces, 1VW =19.2px, 1920/100=19.2 (px). This is still not easy to calculate, so figure out how much VW is per 100px, (100/19.2)*1=(approximately equal to)5.21 (vw). So, if the root HTML is 5.21vw, then 0.18rem=18px (1rem=100px)

Html {the font – size: 5.21 vw; } 100px=1rem=5.21vw The measurement is 90px

100 px = 5.21 vw the font size: 100 px; 1 rem = 100 px font size: 5.21 vw

For example, if you set div widh:100px, you can write 1rem. You can also figure out what vw is for every 10px, widh:100px, you can just write it as 10rem

JS version

720 represents the width of the design manuscript given by the designer. 100 is the conversion ratio. Write 100 for later purposes, for example, if you measure a width of 100px, you can write 1rem, 1px=0.01rem, etc

window.onresize = function () {

getRem(640, 100)

};

function getRem(pwidth, prem) {

var html = document.getElementsByTagName(“html”)[0];

var oWidth = document.body.clientWidth || document.documentElement.clientWidth;

html.style.fontSize = oWidth / pwidth * prem + “px”;

}

conclusion

**1.**Vw combined with REM adaptation

1. Size of design draft = 100VW. Calculate the vw = 1? Px;

2. Figure out 100px=?? Vw.

Font-size:?? Vw} then 1 rem = 100 px

4. Divide the measurement by 100 and you get the value of rem units

2. Js adaptation

1. Reference js; Note to modify a parameter in js, set the parameter value to the size of the design draft

2. Direct 1 rem = 100 px; Divide that by 100, and you get rem units