当先锋百科网

首页 1 2 3 4 5 6 7

如何根据div大小按比例调整字体大小

我试图创建一个网站，其中的网页大小调整到窗口大小的飞行。虽然我们可以让图像等自动调整为div大小的% o。我们似乎无法将div中的文本大小调整到容器的相对百分比。

这个特性需要在浏览器窗口本身调整大小时起作用，而不必刷新页面。

该网站是基本的，正在使用js，css，html。最简单的方法可能会受到赞赏，但任何解决方案都是梦幻般的。

谢谢

因此，您可以使用screen.availHeight来计算一个常数值，并将其与字体大小相乘。

window.onload = function () {
    document.body.style.fontSize = (Math.ceil(screen.availHeight * parseInt(document.body.style.fontSize) / 600) + 'px';
}

在div尺寸改变时，快速创建一些调整字体大小的例子。在父div中使用percentage并调整字体大小应该可以达到这个效果。

http://jsfiddle.net/744A2/

$(document).ready(function() {
  $('#bigger').click(function() {
    $('#test').css('height', $('#test').height() + 100 + 'px');
    $('#test').css('width', $('#test').width() + 100 + 'px');
    check_resize();
  });
  $('#smaller').click(function() {
    $('#test').css('height', $('#test').height() - 100 + 'px');
    $('#test').css('width', $('#test').width() - 100 + 'px');
    check_resize();
  });

});

function check_resize() {
  var h = 50;
  var w = 200;

  var width = $('#test').width();
  var perc = percentage(width, w);

  $('#test').css('font-size', perc + '%');
}

function percentage(a, b) {
  return a / b * 100;
}

#test {
  font-size: 100%;
  background-color: red;
  color: white;
  padding: 20px;
  width: 200px;
  height: 50px;
}

#test h1,
#test p {
  font-size: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div id="test">
  <h1>Header</h1>
  <p>Hello World!</p>
</div>
<input type="button" value="smaller" id="smaller" />
<input type="button" value="bigger" id="bigger" />

使用媒体查询怎么样？

甚至对文本使用%。 http://w3schools.com/cssref/css_units.asp