前端菜鸟，如何理解UI图？

Question

前端菜鸟，拿到UI图，做网站时。下面的CSS Rem 12px;CSS Rem 14px;CSS Rem 14px;，到底该怎么选择？

我目前的理解：

一个盒子，选择`CSS Rem 12px;` width= 40rem;

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

总是保证了盒子的宽度是12px*40 = 16px * 30 =480px;

那既然如此，我又该如何选择，还是任意选择？？？

Answer 1

rem是相对于跟元素的倍数

Answer 2

你首先要理解em是什么，然后再理解Rem是什么，这问题就解决了。

我这里不对这个做详细介绍，你可以自己去google这两个分别是什么。

回到问题，rem和px一样都是单位，最后也是会转换成px，但转换的比例不是恒定的，这个跟根的font-size有关。

譬如1rem可以等于12px，也可以等于14px。

那么这里就很好理解了，这里面的意思是当你的css用rem为单位时，这个rem实际代表的是12px、14px还是16px。