如何将字体大小设置为浏览器窗口的 100%

Question

我正在尝试弄清楚如何将字体的大小设置为浏览器窗口的高度/宽度 = 100% 并使其具有响应性。

我知道它会被破坏 - 但我希望字体为 100% 宽度和 100% 高度。

基本上

<div (set to responsive 100% of browser)>
  <p class="100by100">
    sample
  </p>
</div>

其中“Sample”始终是 Bowser 宽度和高度的 100%。

谢谢

Answer 1

我得到了这个工作，但我必须使用 javascript 在内部元素上设置 transform。 https://jsfiddle.net/ynheeut3/

html:

<div id="container">
  <div id="fill">sample</div>
</div>

css:

#container {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: hidden;
}
#fill {
  margin: 0;
  display: inline-block;
  transform-origin: 0 0;
}

javascript：

function fillWithText () {
  var fill = document.getElementById('fill');
  var container = document.getElementById('container');

  var totalHeight = container.clientHeight;
  var totalWidth = container.clientWidth;

  var currentHeight = fill.clientHeight;
  var currentWidth = fill.clientWidth;

  var scaleX = totalWidth / currentWidth;
  var scaleY = totalHeight / currentHeight;

  fill.style.transform = 'scale(' + scaleX + ',' + scaleY + ')';
};
window.addEventListener('resize', fillWithText, false);
fillWithText();