slider - Jssor slider 响应式标题，不需要的文本调整大小

Question

使用 JSSOR slider ，函数 ScaleSlider() 调用 $ScaleWidth 以根据视口(viewport)调整 slider 的大小。这是通过将转换样式应用于 #slider1_container 元素来实现的。

transform: scale(0.756364);

但是，这也会导致标题中的任何文本调整大小，使其难以辨认。

<div id="slider1_container">
    <div u="slides">
            <div u="caption" class="myCaption">
                <p>Text goes here</p>                   
            </div>              
            <img u="image" src="myImage.jpg" />             
    </div>              
 </div>

如何防止标题文本 (.myCaption) 受到转换样式的影响？

Answer 1

这是一个非常恼人的问题，我们的设计师一直提示自动调整大小。我为解决这个问题所做的是:

1.创建了一个函数来缩放将我的字幕恢复到其原始大小的 div。 div 最初是隐藏的，应用转换后显示。我的 slider 的原始尺寸是 1920 像素宽度，所以我用它来计算浏览器调整大小的百分比，以便将字幕缩小

function ScaleCaptions(){   
bodyWidth = document.body.clientWidth;
widthChange=1920/bodyWidth;

if(bodyWidth<992){widthChange=widthChange/1.5;}

$(".captionHolder").css("transform","scale("+widthChange+")");  
$(".captionHolder").show(); 
}

1. 在调用 ScaleSlider 函数之后，我为以下 3 个事件调用此函数:

   $(window).bind("load", ScaleSlider);
   $(window).bind("resize", ScaleSlider);
   $(window).bind("orientationchange", ScaleSlider);
   
   
   $(window).bind("load", ScaleCaptions);
   $(window).bind("resize", ScaleCaptions);
   $(window).bind("orientationchange", ScaleCaptions);
   

2. 如果您想在某个时候调整标题的大小，css 规则将不起作用，因此您必须使用 jquery 来完成。在我的例子中，我想将标题调整到 992px 以下，所以我在我的函数中添加了这行代码

   if(bodyWidth<992){widthChange=widthChange/1.5;}