我試圖創建一個網站，其中的網頁大小調整到窗口大小的飛行。雖然我們可以讓圖像等自動調整為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