Front-end rookie, how to understand UI diagram?

A rookie at the front end, get the UI picture and do the website. The following CSS Rem 12pxterCSS Rem 14pxtransCSS Rem 14px; , how on earth should I choose?

my current understanding:

`CSS Rem 12px;` width= 40rem;

`CSS Rem 16px;` width= 30rem;

12px*40 = 16px * 30 =480px;


Mar.01,2021

rem is a multiple relative to the following element


you have to understand what em is first, and then understand what Rem is, and this problem is solved.

I will not elaborate on this here, you can go to google what these two are.

back to the question, rem, like px, is a unit, and eventually it will be converted to px, but the conversion ratio is not constant, which has something to do with the font-size of the root.

for example, 1rem can be equal to 12px or equal to 14px.

so it's easy to understand here, which means that when your css is in units of rem, does the rem actually represent 12px, 14px, or 16px.

Menu