基于容器宽度动态调整文本大小
我正在开发一个响应式设计，我有一些显示
标签，我希望在浏览器窗口的宽度减小时缩小。
初始设置，基于960px的宽度：
- 正文字体大小设置为14px
- h3标签的字体大小为40px
- 包含div的宽度为230px
所以这就是我为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函数是使用的错误事件，因为文本应该在页面加载时自动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
对于通过谷歌搜索“响应字体大小”之类的人来说，这可能会有所帮助：
https://github.com/davatron5000/FitText.js
它是一个jQuery插件，根据容器的宽度设置字体大小。 它还有一些选项可以获得所需的结果。
PS：当然，它还可以在调整窗口大小时缩放文本。