Question

使用JSSOR滑块，ScaleSlider（）函数调用$ ScaleWidth根据视口调整滑块的大小。这是通过将变换样式应用于＃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和应用转换后的div。我的滑块的原始大小是1920像素宽，所以我用它来计算浏览器大小调整的百分比，以便缩放字幕

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

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

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

在调用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);

如果你想在某些时候调整字幕大小，css规则就不行了，所以你必须用jquery来做。在我的情况下，我想调整992px以下的标题，所以我在我的函数中添加了这行代码
```
if(bodyWidth<992){widthChange=widthChange/1.5;}
```

Answer 2

我不同意上述方法，对不起写另一个答案，但我无法发表评论。即使为已建立的断点（768,992,1200，等等）添加css规则，文本也会继续沿滑块调整大小，不同之处在于从css规则中声明的文本大小开始。因此，例如，如果我想要768px的字体大小为16px，虽然它将从16px在768px开始，它将继续沿滑块调整大小，这不是我想要的。此外，16px字体大小，1200px分辨率，16px字体大小，768px分辨率有很大差异，第二种情况下文字非常小

Answer 3

我有类似的自动功能，适用于我的解决方案：

function ScaleSliderCaptions(id,obj){
    //var parentWidth = jQuery('#'+id).parent().width();
    var bodyWidth = document.body.clientWidth;
    var widthChange=obj.$GetOriginalWidth()/bodyWidth;
    if(bodyWidth<(obj.$GetOriginalWidth()/2)){widthChange=widthChange/1.5;}
    jQuery(".slider-content").css("transform","scale("+widthChange+")").show();
}

obj - 之前创建的滑块对象，

id - slider_container

Answer 4

标题应始终与滑块一起缩放。没有选项可以阻止字幕缩放。

下面的Css技巧可能会满足您的需求，

    @media only screen and (max-width: 480px) {
        .myCaption{
            ...;
            font-size: 24px;
            ...;
        }
    }

    @media only screen and (max-width: 768px) {
        .myCaption{
            ...;
            font-size: 16px;
            ...;
        }
    }

    @media only screen and (min-width: 769px) {
        .myCaption{
            ...;
            font-size: 12px;
            ...;
        }
    }

Jssor滑块响应标题，不需要的文本调整大小

4 个答案: