Question

我试图找出如何将字体大小设置为浏览器窗口的高度/宽度= 100％并使其响应。

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

基本上

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

其中“Sample”始终是bowser宽度和高度的100％。

感谢

Answer 1

我让这个工作，但我不得不使用javascript在内部元素上设置transform。 one solution

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();

如何设置字体大小100％的浏览器窗口

1 个答案: