Question

好的，有一个成功的代码，用于在页面加载时将表中的td元素调整为用户屏幕的百分比，如下所示：

jQuery(document).ready(function($){
    var xWidth = $(window).width();
    $("td.tablecol_0").animate({ 
        width: (xWidth * (15 / 100)) + 'px',
        minWidth: (xWidth * (15 / 100)) + 'px',
        maxWidth: (xWidth * (15 / 100)) + 'px'}, 1000);
    $("td.tablecol_1").animate({ 
        width: (xWidth * (35 / 100)) + 'px',
        minWidth: (xWidth * (35 / 100)) + 'px',
        maxWidth: (xWidth * (35 / 100)) + 'px'}, 1000);
    $("td.tablecol_2").animate({ 
        width: (xWidth * (15 / 100)) + 'px',
        minWidth: (xWidth * (15 / 100)) + 'px',
        maxWidth: (xWidth * (15 / 100)) + 'px'}, 1000);
});

因此，这根据窗口宽度工作：15％，35％和15％（3列）。效果很好。但是，我想让它的内部内容也调整大小......就像它里面的所有元素一样。我希望他们相应调整大小。

如何使用上面的代码在jQuery中快速轻松地完成此操作？

Answer 1

只需将font-size属性设置为某个percent值，就像

一样

table{ font-size:50% }

使用jQuery，你可以这样做，

$('table').css('font-size', '100%')

或者

$('table').css('font-size', '70%')

或单独为td

$("td.tablecol_0").animate({ 
    'width' : (xWidth * (15 / 100)) + 'px',
    'minWidth' : (xWidth * (15 / 100)) + 'px',
    'maxWidth' : (xWidth * (15 / 100)) + 'px',
    'fontSize' : (xWidth * (15 / 100)) + '%'
}, 1000);

如果您为所有100%设置了tds，那么您只需使用$(表).css('fontSize', '100%')。

DEMO.

jQuery调整元素中的文本大小

1 个答案: