Javascript 根据容器宽度动态调整文本大小
我正在开发一种响应性强的设计,我有一些显示标签,当浏览器窗口的宽度减小时,我想缩小这些标签 初始设置基于960像素的宽度:Javascript 根据容器宽度动态调整文本大小,javascript,jquery,font-size,responsive-design,Javascript,Jquery,Font Size,Responsive Design,我正在开发一种响应性强的设计,我有一些显示标签,当浏览器窗口的宽度减小时,我想缩小这些标签 初始设置基于960像素的宽度: 正文字体大小设置为14px h3标签的字体大小为40px 包含div的宽度为230px 下面是我为javascript/jQuery所做的工作: $(window).resize(function(){ var containerSize = $('.container').width(); var textPercentage = 0.1739130434
$(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的原因。
窗口。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');
您需要在文档之后运行此代码。准备好以确保容器的宽度正确。您还可以将此代码放在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
事件中都选择它,因为当您实际调整浏览器大小时,会触发大量此类事件。窗口。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');
您需要在文档之后运行此代码。准备好以确保容器的宽度正确。您还可以将此代码放在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
你可以试试这个
$(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
对于那些通过谷歌搜索“响应字体大小”之类的内容来发现这一点的人来说,这可能会有所帮助:
它是一个jQuery插件,根据容器的宽度设置字体大小。它还提供了一些选项来获得所需的结果
PS:当然,当窗口调整大小时,它也会缩放文本。对于通过谷歌搜索“响应字体大小”之类的内容来查找文本的人,这可能会有所帮助:
它是一个jQuery插件,根据容器的宽度设置字体大小。它还提供了一些选项来获得所需的结果
PS:当然,当窗口调整大小时,它也会缩放文本。您应该能够使用css媒体查询来进行此操作,而无需使用js@JasperShankarSangoli都给出了答案,但是我会添加一个注释,您可能会考虑节流调整大小事件处理程序的执行频率。参考或@elclanrs媒体查询仅允许我根据特定窗口宽度调整文本大小。我想让我的文本根据容器的宽度自动调整大小。@jessegavin你能解释一下插件的具体功能吗?我认为这与防止脚本持续运行有关,但我不懂技术术语。谢谢@pixelcook这篇文章比我在解释它时做得好得多。你应该能够使用css媒体查询,而不需要使用js@JasperShankarSangoli都给出了答案,但是我会添加一个注释,您可能会考虑节流调整大小事件处理程序的执行频率。参考或@elclanrs媒体查询仅允许我根据特定窗口宽度调整文本大小。我想让我的文本根据容器的宽度自动调整大小。@jessegavin你能解释一下插件的具体功能吗?我认为这与防止脚本持续运行有关,但我不懂技术术语。谢谢@pixelcook这篇文章比我解释的要好得多。嗨,贾斯珀,非常感谢你的回复!我有一个关于“等待document.ready
开火”的问题。我不太明白这意味着什么,你能解释一下,或者把我和一篇解释的文章联系起来吗?谢谢我认为jQuery的人可以更好地解释这一点:<代码>传递给.ready()的处理程序保证在DOM就绪后执行,因此这通常是附加所有其他事件处理程序并运行其他jQuery代码的最佳位置。
。基本上,当您将代码放入文档.ready
事件处理程序中时,您将确保要操作的元素可用于操作(例如,如果您将JS代码放在文档的头部,而没有document.ready
事件处理程序,您将无法选择body标记中的元素。我的理解是,将脚本的链接放在页面底部会使这变得不必要,因为DOM在脚本之前加载。这正确吗?基本上是这样的我就是这么做的。如果代码不在文档中,那么它将能够更快地执行。就绪
事件处理程序。您可以通过查看开发人员工具的“网络”选项卡来查看此事件何时触发;您还可以查看窗口。加载
何时触发。不使用文档。就绪
事件处理程序时,有时可以节省秒数.Sweet.Jasper,这太棒了-谢谢你的回答,我的响应设计谢谢你。嗨