javascript - Contentflow - 如何使字幕文本动态调整大小？

Question

我正在尝试向内容流中的图像添加文本，但当我滚动浏览它们时，我需要调整文本大小，这样文本就不会移动。

http://www.jacksasylum.eu/ContentFlow/index.php

Answer 1

我不知道是否有自动执行此操作的方法，但对于响应式网页设计，您可以通过 CSS 或使用 jQuery 硬核字体大小。

jQuery

$(window).on('resize', function(event) {
    if($(window).width() < 400) {
        $('.CAPTIONCLASS').css("font-size", "20");
    }
    else {
        $('.CAPTIONCLASS').css("font-size", "10");
    }
});

CSS

@media screen and (max-width: 400px) {
    .CAPTIONCLASS {
        font-size: 20px;
    }
}

@media screen and (max-width: 100px) {
    .CAPTIONCLASS {
        font-size: 15px;
    }
}