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;
    }
}