3

使用 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) 受到变换样式的影响？

4

4 回答 4

2

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

1.创建了一个函数来缩放将我的字幕保存到其原始大小的 div。最初隐藏的 div 并在应用转换后显示。我的滑块的原始大小是 1920 px 宽度，所以我用它来计算浏览器调整大小的百分比，以便缩小字幕

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;}
于 2015-05-12T07:29:50.607 回答
0

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

于 2015-02-12T12:27:29.287 回答
0

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

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

于 2017-01-14T12:59:21.923 回答
-1

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

下面的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;
            ...;
        }
    }
于 2014-08-28T00:16:48.367 回答