font-size is 12px, then 1rem is 12px;

25px is 25/12rem, which is the width and height.

margin-top is 30/12rem

You can read this answer rem, it is better to remember this kind of thing by yourself

If the font-size of the html root element is 100px;
then 100px = 1rem;
0.5rem = 50px;
.04rem = 4px;

It is recommended to set the font size of the root element to 100px; it is easy to convert.

rem is generally used for mobile layout, and the relationship with px is the fontSize of your html. Give you a self-executing function and you will understand.

<script type="text/javascript">
      (function (win,doc) {
        function setSize() {
          doc.documentElement.style.fontSize=20*document.documentElement.clientWidth/320+'px';
        }
        setSize();
        win.addEventListener('resize',setSize,false)
      })(window,document)
  </script>

You can just introduce this and put it at the top