我创建了一个相册生成器， 一个人可以添加照片和文字，并根据自己的喜好对其进行操作。
我的一个要求是调整屏幕大小以适应不同的比例和分辨率，因此图像和文本需要正确适应任何屏幕和尺寸。
用图像很容易，我只是做一个position:absolute；相对于页面 但我似乎无法理解如何使用字体大小和行高来实现这一点。
我这里有一个关于我遇到的问题的例子: (请注意 300 和 600 之间的区别)
var def = 400;
var fontsize = 20;
var lineHeight = 20;
var init = function() {
var val = document.getElementById('val');
val.onchange = function() {
var value = parseInt(this.value);
if (!isNaN(value)) {
var diff = (def / value) * 100;
document.getElementById('wrap').style.fontSize = ((fontsize / diff) * 100) + 'px';
document.getElementById('container').style.lineHeight = ((lineHeight / diff) * 100) + 'px';
document.getElementById('container').style.width = value + 'px';
document.getElementById('container').style.height = value + 'px';
}
}
}.wrap {
font-size: 20px;
}
.container {
width: 400px;
height: 400px;
background-color: #eee;
line-height: 20px;
}
.container p {
font-size: 1em;
line-height: inherit;
}<html>
<head>
<style>
</style>
</head>
<body onload="init();">
<h1>switch between 300 and 600 values to see how the line breaks and is not resized in synced with its parent</h1>
<input id="val" type="text" value="400" />
<div id="wrap" class="wrap">
<div id="container" class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur risus in cursus ullamcorper. Quisque volutpat neque sed vestibulum iaculis. Quisque luctus mollis euismod. Fusce pharetra dictum justo, ac volutpat leo sollicitudin sed.
Nunc pellentesque nibh vulputate urna hendrerit convallis. Praesent eleifend rutrum odio eget facilisis. Nulla placerat ultricies erat.</p>
<p>Quisque eget sagittis massa. Cras scelerisque molestie sollicitudin. Nulla vehicula, sem vel lacinia varius, lacus orci iaculis neque, at lacinia mi nulla rutrum velit. Mauris pulvinar sem sit amet tempus dapibus. Duis augue tortor, ullamcorper
ac erat sed, cursus fermentum ex. Maecenas mattis felis nec aliquam imperdiet. Integer eget accumsan ante, eget maximus nunc.</p>
</div>
</div>
<script type="text/javascript">
</script>
</body>
</html>最佳答案
一个简单的方法是使用 transform: scale。
它将产生跨浏览器的相同缩放结果。
var def = 400;
var init = function() {
var val = document.getElementById('val');
val.onchange = function() {
var value = parseInt(this.value);
if (!isNaN(value)) {
var diff = (value / def);
/* changed property and value */
document.getElementById('wrap').style.transform = 'scale('+diff+')';
}
}
}.wrap {
font-size: 20px;
transform-origin: left top; /* added property */
}
.container {
width: 400px;
height: 400px;
background-color: #eee;
line-height: 20px;
}
.container p {
font-size: 1em;
line-height: inherit;
}<body onload="init();">
<h1>switch between 300 and 600 values to see how the line breaks and is not resized in synced with its parent</h1>
<input id="val" type="text" value="400" />
<div id="wrap" class="wrap">
<div id="container" class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque efficitur risus in cursus ullamcorper. Quisque volutpat neque sed vestibulum iaculis. Quisque luctus mollis euismod. Fusce pharetra dictum justo, ac volutpat leo sollicitudin sed.
Nunc pellentesque nibh vulputate urna hendrerit convallis. Praesent eleifend rutrum odio eget facilisis. Nulla placerat ultricies erat.</p>
<p>Quisque eget sagittis massa. Cras scelerisque molestie sollicitudin. Nulla vehicula, sem vel lacinia varius, lacus orci iaculis neque, at lacinia mi nulla rutrum velit. Mauris pulvinar sem sit amet tempus dapibus. Duis augue tortor, ullamcorper
ac erat sed, cursus fermentum ex. Maecenas mattis felis nec aliquam imperdiet. Integer eget accumsan ante, eget maximus nunc.</p>
</div>
</div>
</body>关于html - CSS 行高和字体大小 : shrink relatively to the container?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44615980/