CSS line-height和font-size：相對於容器縮小？

Question

我創建了一個照片相冊生成器，一個人可以添加照片和文本，並根據自己的喜好對其進行操作。

我的要求之一是調整屏幕大小以適合不同的比例和分辨率，因此圖像和文本需要正確地適合任何屏幕和大小。

擁有一個圖像很容易，我只是提出一個立場：絕對； 相對於頁面，但我似乎無法理解如何使用font-size和line-height做到這一點。

我這里有一個關於我的問題的示例：（請注意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>

Answer 1

一種簡單的方法是使用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>

CSS line-height和font-size：相對於容器縮小？

問題描述

1 個解決方案

解決方案1
1 已采納 2017-06-18 17:55:59

CSS line-height和font-size：相對於容器縮小？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-06-18 17:55:59

解決方案1
1 已采納 2017-06-18 17:55:59