缩小时覆盖 jssor 滑块中的字体大小

Question

滑块处于'responsive'模式时是否可以重置字体大小？我有一个滑块，它可以很好地工作，直到屏幕尺寸下降到大约 740 像素宽以下。然后类型变得几乎无法阅读。

所以我尝试用媒体查询覆盖字体大小。没有运气。原来 transform: scale(0.32298) - 或类似的小数 - 被应用于其中一个父容器。也尝试过覆盖它，但也没有取得太大进展。

是否有 'canonical' 方法来 preserve/override 缩放效果？ ...回调等？

编辑：

转换显示为内联样式：

<div style="position: absolute; top: 0px; left: 0px; width: 1024px; height: 654px; transform-origin: 0px 0px 0px; transform: scale(0.34454345703125);">

it appears in the first child of <div id="slider1_container"></div>

Answer 1

所以，我认为您的滑块中的任何幻灯片中都有如下内容元素。

<div style="...font-size: 50px; ...">You text</div>

请将内联样式移动到 css 块，然后您将获得以下格式，

<div class="classname">You text</div>

通过这种方式，您有机会在不同的屏幕上应用不同的字体大小。

<style>
    @media only screen and (max-width: 480px) {
        .classname {
            font-size: ...px;
        }
    }
    @media only screen and (max-width: 768px) {
        .classname {
            font-size: ...px;
        }
    } 
</style>

Answer 2

最终使用了 cycle2 插件。事实证明它非常灵活，并且能够毫无问题地使用媒体查询重新设置内容样式。

缩小时覆盖 jssor 滑块中的字体大小

override font-size in jssor slider when scaled down

jssor