根据容器宽度动态调整文本大小
我正在设计一个响应式设计，并且我有一些显示<h3>标记，当浏览器窗口宽度减小时，我想缩小它。
初始设置基于960px的宽度：
所以这里是我为javascript / jQuery所做的工作：
$(window).resize(function(){
var containerSize = $('.container').width();
var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
var textRatio = containerSize * textPercentage;
var textEms = textRatio / 14;
$('.container h3').css(fontSize,textEms+"em");
});
我的javscript技能显然是相当有限的，所以我希望你能帮助我获得这一切的好处和工作权利。 我认为$(window).resize函数是错误的使用事件，因为文本应该在页面加载时自动调整大小，而不仅仅是调整窗口大小。
先谢谢您的帮助！
注意：我不希望文本伸展到容器边缘，这就是为什么我没有使用FitText.js或BigText.js。
window.resize是正确的事件，但它不会在页面加载时触发。 但是，您可以将.trigger('resize')添加到您的代码中以使其在页面加载时触发：
$(window).bind('resize', function(){
var containerSize = $('.container').width(),
textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
textRatio = containerSize * textPercentage,
textEms = textRatio / 14;
$('.container h3').css(fontSize, textEms+"em");
}).trigger('resize');
您将在document.ready之后运行此代码，以确保您为容器获得的宽度是正确的。 您也可以将此代码放置在HTML文档的底部（您应该使用或不使用document.ready事件处理程序），以确保在运行此代码时元素可用：
//wait for `document.ready` to fire
$(function () {
//cache the .container and H3 elements
var $container = $('.container'),
$h3 = $container.find('h3');
//bind event handler to `window.resize`
$(window).bind('resize', function(){
//get the width of the container
var containerSize = $container.width(),
textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
textRatio = containerSize * textPercentage,
textEms = textRatio / 14;
$h3.css('fontSize', textEms+"em");
}).trigger('resize');
});
请注意，我缓存了H3元素，因此在每次resize事件时都不必选择它，因为实际调整浏览器大小时，会激发大量这些事件。
你可以试试这个。
$(window).resize(function(){
var containerSize = $('.container').width();
var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
var textRatio = containerSize * textPercentage;
var textEms = textRatio / 14;
//fontSize should be enclosed in quotes
$('.container h3').css('fontSize', textEms+"em");
})
.resize();//Triggers the resize on page load to set the font size
对于通过Google提供的“响应字体大小”来发现这一点的人来说，这可能会有所帮助：
https://github.com/davatron5000/FitText.js
这是一个jQuery插件，它根据容器的宽度设置字体大小。 它也有一些选项来获得理想的结果。
PS：当然，它也会在窗口大小调整时缩放文本。
链接地址: http://www.djcxy.com/p/87517.html