Javascript 调整元素大小

Question

我有一个猫头鹰轮播，它会自动加载由屏幕大小和项目决定的宽度。 div .owl-stage 在页面加载时设置了宽度，并在调整浏览器大小时调整大小。 我得到了 .owl-stage 元素的宽度并将其应用于元素 .block 标题，效果很好。

$(document).ready(function() {
  $(".block-title").css({
    'width': ($(".owl-stage").width() + 'px')
  });
});

问题是 .owl-carousel 宽度发生变化，但 .block-title 保持设置为页面加载时设置的初始宽度。需要在函数中添加什么，以便 .block-title 宽度随着 .owl-stage 宽度的变化而保持更新？

Answer 1

您可能必须更改 .block-title 类的 font-size 才能“调整”它的大小：

let fontSize = .9;
$(document).ready(function() {
  $(".block-title").css({
    'font-size': (`${fontSize}vw`)
  });
});

将fontSize 变量调整为小数，使其看起来正确。然后它应该扩展到不同的浏览器宽度。请注意，我使用vw 作为字体大小的单位。例如，1 的vw 将是视口宽度的 1% 的像素字体大小。因此，在调整浏览器大小时，字体大小将根据视口宽度进行调整。