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。

它将生成相同的跨浏览器缩放结果。

＆＃13;

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+')';
    }
  }
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

CSS line-height和font-size：相对容器缩小？

1 个答案: