Jssor滑塊響應標題，不需要的文本調整大小

使用JSSOR滑塊，函數ScaleSlider（）調用$ ScaleWidth根據視口調整滑塊的大小。這是通過將變換樣式應用於＃slider1_container元素來實現的。Jssor滑塊響應標題，不需要的文本調整大小

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）受變換樣式影響？

來源

2014-08-27 Marc Owens

標題應始終與滑塊一起縮放。沒有選項可以阻止標題縮放。下面

的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-28 00:16:48 jssor

'Caption應該總是與滑塊一起縮放。是的，但是文字以相當醜陋，像素化的方式縮放，而不是正確更改字體大小。 – CJBrew 2014-12-23 11:32:39

-1

我會用上面的辦法，不好意思寫另一個答案不同意，但我不能發表評論。即使爲已建立的斷點（768,992,1200等）添加css規則，文本也會沿着滑塊繼續調整大小，其差別從css規則中聲明的文本大小開始。所以例如，如果我想爲768px的字體大小爲16px，雖然它將從16px開始，在768px，它會繼續調整滑塊的大小，這不是我想要的。 1200px分辨率下的16px字體大小和768px分辨率下的16px字體大小有很大差異，第二種情況下文本非常微小

來源

2015-02-12 12:27:29 George

這是一個非常令人惱怒的問題，我們的設計師不斷地抱怨自動調整大小。我做了什麼處理這是：

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

我請此功能爲以下3個事件中，ScaleSlider功能後，被稱爲：

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

來源

2015-05-12 07:29:50 George

我有類似的自動化功能，適用於我的解決方案：

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-14 12:59:21 step

Jssor滑塊響應標題，不需要的文本調整大小

回答

相關問題