<h1 class="fullscreenType">
  <span class="fullscreenType-sizer">
    such a large title
  </span>
</h1>

<div class="explain">
  <p>this one is a quick layout solution to create a headline the takes the whole screen width; tutorial in the code comments (:</p>
  <p> // </p>
  <p>
    essa é uma rápida solução de layout pra implementar uma frase que ocupa toda a largura da tela. tutorial nos comentários do código (:
  </p>
</div>

/* 
This is the necessary style:
---
Esse é o estilo necessário:
*/
.fullscreenType {
  text-align: center;
}
.fullscreenType-sizer {
  display: inline-block;
}

/* Just that.
-- 
Só isso mesmo. */

body {
  color: #ff6666;
  padding: 2rem 0;
}
.explain {
  padding: 0 4rem;
  margin-top: 3rem;
  font-size: 0.8rem;
  font-family: serif;
  opacity: 0.5;
}
.fullscreenType {
}

function fullScreenType() {
  const fullType = document.querySelector(".fullscreenType-sizer");
  fullType.style.transform = "scale(1)";
  let fullTypeWidth = fullType.getBoundingClientRect().width;
  let fullTypeHeight = fullType.getBoundingClientRect().height;
  let fullTypeWidthRatio = window.innerWidth / parseInt(fullTypeWidth);
  console.log(fullTypeWidthRatio);
  fullType.style.transform = "scale(" + fullTypeWidthRatio + ")";
  fullType.parentNode.style.height = fullTypeHeight * fullTypeWidthRatio + "px";
}

fullScreenType();

window.addEventListener("resize", fullScreenType);

/*
  1 - we select our element and get its original 
  dimensions using getBoundingClientRect();
  2 - we define how much we need to scale our type 
  to make it as large as the screen width. We get the ratio
  dividing the window.innerWidth by the original width of our type
  3 - we set scale transformation with the ratio value we found above;
  4 - finally, we have to manually redefine the height of our parent 
  element, because transformations do not affect the real dimensions and 
  in casewe have any element below our type, well, it would be a mess.
  5 - we set a resize listener to recalculate stuff;
  -----
  1- primeiro selecionados nosso elemento e pegamos as dimensões dele 
  usando getBoundingClientRect();
  2 - nós definimos quanto precisamos aumentar nosso elemento pra 
  deixar ele da largura da tela. Nós obtemos essa proporção dividindo
  o window.innerWidth pela largura original do nosso texto.
  3 - nós inserimos uma transform de scale com o valor da proporção 
  que encontramos acima;
  4 - finalmente, nós redefinimos manualmente a altura do elemento pai,
  porque o css transform não afeta da dimensão real do elemento e, se 
  caso tivéssemos elemntos abaixo dele, bom, seria uma bagunça.
  5 - adicionamos um resize listener pra refazer os cálculos
*/