responsive fonts, margins, paddings

Question

I have this basic css style. What am i trying to do is to make the text responsive(fonts), i know i have to use ems / rems to do that ( i choose rems with a fallback to px not sure if it's right but you can see in the code how i did, the px i'm not sure if i set it right), the formula i used was font size divided by 16px. Now we have a relative font size for h tags i think.. but still if i would like to resize the browser doesn't do any magic. Can you help me understand how to make the fonts responsive using rems or something else, using rems/other on setting margins, paddings, line-height? a complex example and explanation is welcomed :-d thank you very much for your time.

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  background-color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #000000;
  position: relative;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  width: 100%;
  min-width: 0;
}
html,
body {
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin: 0  0;
  margin: 0  0;
}
h1 {
  font-size: 3px;
  font-size: 3rem;
}
h2 {
  font-size: 2.25px;
  font-size: 2.25rem;
}
h3 {
  font-size: 1.5px;
  font-size: 1.5rem;
}
h4 {
  font-size: 1.125px;
  font-size: 1.125rem;
}
h5 {
  font-size: 1px;
  font-size: 1rem;
}
h6 {
  font-size: 0.875px;
  font-size: 0.875rem;
}