我正在尝试弄清楚如何将字体大小设置为浏览器窗口的高度/宽度 = 100% 并使其响应。
我知道它会被损坏 - 但我希望字体为 100% 宽度和 100% 高度。
本质上
<div (set to responsive 100% of browser)>
<p class="100by100">
sample
</p>
</div>
其中“样本”始终是 bowser 宽度和高度的 100%。
谢谢
最佳答案
我让它工作了,但我必须使用 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();
关于javascript - 如何将字体大小设置为浏览器窗口的 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35932945/