调整窗口大小时自动调整文本大小（字体大小）？
我一直在尝试（徒劳）build立一个页面，当我改变窗口大小时，页面的元素会resize。 我有工作在CSS图像没有问题，但我似乎无法完成相同的文字，我不知道它甚至可以在CSS中。 我似乎无法find一个jquery脚本来完成这一点。
当用户调整窗口大小时，我基本上希望页面能够dynamic且stream畅地缩放，而不必调用页面缩放。 这工作正常我的img divs通过CSS，但不是为文本，保持相同的大小。
有任何想法吗？
我必须自己做这个。 我所做的是为身体设置一个基本文字大小，以及所有其他大小的百分比。 然后，我使用一个简单的jQuery脚本来改变窗口大小的基本大小。 其他尺寸然后更新。
我用了这样的东西：
$(function() { $(window).bind('resize', function() { resizeMe(); }).trigger('resize'); }); 在resizeMe函数中，我有这样的：
//Standard height, for which the body font size is correct var preferredHeight = 768; //Base font size for the page var fontsize = 18; var displayHeight = $(window).height(); var percentage = displayHeight / preferredHeight; var newFontSize = Math.floor(fontsize * percentage) - 1; $("body").css("font-size", newFontSize);
试试像FitText这样的jQuery插件。 它会自动调整文本大小以适应父元素的宽度。
另一个具有相同目标的jQuery插件是BigText （ 演示 ）。
您可以使用CSS3媒体查询来执行此操作，根据浏览器大小指定不同的基本字体大小。 A List Apart有一篇很好的文章
对于IE支持，您可以使用CSSexpression式来破解它
这要求您使用固定的基本字体大小，例如在body标签上，而在其他地方使用基于百分比或em的大小。
基于Lizzan的回答，这是一个使用宽度和高度的平方根来获得比例尺寸的版本：
// When document has finished loading $(document).ready(function() { var resizeText = function () { // Standard height, for which the body font size is correct var preferredFontSize = 180; // % var preferredSize = 1024 * 768; var currentSize = $(window).width() * $(window).height(); var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize); var newFontSize = preferredFontSize * scalePercentage; $("body").css("font-size", newFontSize + '%'); }; $(window).bind('resize', function() { resizeText(); }).trigger('resize'); });
演示： http : //jsfiddle.net/tomsoderlund/26Gad/embedded/result/
我使用的是http://practicaltypography.com/end-credits.html#bio M. Butterick的技巧：
<style type="text/css"> <!--adattamento font-size a browser width--> @media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}} <!--body-format--> body { max-width:1000px; min-width:520px; line-height:1.33em; margin:1em; background-color:#f7f7f7; font-family:Source Sans Pro; color:#361800; } </style>
roryf在正确的轨道上！
媒体查询是（其中之一）的答案。
这里的诀窍是从body开始，无处不在的字体大小使用％。 这样字体大小得到inheritance，当你改变它的身体，它得到的地方变了。
尝试像这样：
body { font-size: 100% } h1 {font-size: 200% } @media all and (max-width:600px) { body {font-size: 70%} }
当网站的宽度变小到600px时，字体大小将变为所有地方的70％，这里使用了％（在这个例子中也是h1）。
Lizzans的答案是完美的！ 离开它-1！ 当我把它取下的时候，小猫正在死亡。
而不是fontsizevariables，只需将其设置为您的页面的标准字体大小。 我的16岁。
你可以使可复制的文本更简单。 这个解决scheme适用于我。 http://jsfiddle.net/VooDi/dka48dx8/
对于正文设置字体大小，这相当于您当前的窗口内部宽度;
为jsfiddle 560 px;
body { font-size: 560px; }
JS：
onresize=onload=function() { document.body.style.fontSize=window.innerWidth+"px" }
并以百分比表示所需的元素集字体大小
<h1 style="font-size:5%">Resize this text!!!!</h1>
就这样。 希望这有助于某人。
