Conversion between REM and PX (mobile side)

Recently, because of the work contact between the REM and PX conversion, before knowing some, but still relatively vague, not very clear, and later found himself a bit of information, as well as the personal test finally understand how they are converted.

REM is a relative value, it is relative to the root element of HTML, so we need to set the Font-size value of HTML, the content size is relative to the value of the set size, for example, the HTML font-size is 100px, The font-size of the content wants to be set to 20px, which translates to the REM unit is 20/100=0.2rem. However, in the development, the Font-size value of HTML will change dynamically, so as to adapt to various mobile phones, but we can set the 100px to the maximum value. HTML font-size is not limited to PX units, some also use%, I encountered this in the development, I did not understand the beginning, and then I checked to know the percentage of pixels will have corresponding pixel value, such as 62.5% corresponding pixel value is 10px,75% corresponding pixel value is 12px, How is this calculated? As we all know, the default font size of the browser is 16px, then 16px corresponds to 100%, the percentage of other pixels is divided by 16.

when the font-size value of HTML is not set, REM is relative to the browser's font-size value, which is 16px.

What are the benefits of using REM? REM Since is a relative value, then we can change the HTML font-size value to dynamically change the page content font size, width height, spacing and so on, so that there is a free scaling effect, on the mobile side can be adapted to different phone screens, so on the mobile side using REM as a unit.

Conversion between REM and PX (mobile side)