响应式文本——未使用 FitText 和 FlexSlider 初始化的函数

Posted 2023-03-06

【中文标题】响应式文本——未使用 FitText 和 FlexSlider 初始化的函数

【英文标题】：Responsive text -- Function not Initializing with FitText and FlexSlider

【发布时间】：2012-11-23 15:40:51

【问题描述】：

我有一个使用 FlexSlider 的响应式滑块。 我还希望每个滑块下的文本调整大小。 FitText 不会在除第一张幻灯片之外的任何幻灯片上初始化，或者如果我调整窗口大小。 我怎样才能使这项工作（没有 FOUC）？ 应该可以在 IE 8 以上以及现代浏览器中使用。

http://jsfiddle.net/simply_simpy/adtVP/11/

HTML

    <div class="flexslider">
      <ul class="slides">
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/animals/"  />
              <figcaption>
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/sports/"  />
              <figcaption>
                <h1>uis nostrud exercitation ullamco </h1>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/people/"  />
              <figcaption>
                <h1>ncididunt ut labore et dolore magna aliqua.</h1>
                <p>abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
      </ul>
    </div>​

CSS

    .flex-control-nav, .flex-control-paging 
        clear: both;
    

    .flexslider 
        width: 100%;
    

    .flexslider img 
      min-width: 100%;
    
    h1 
        font-size: 23px;
        width: 100%;
    
    p 
        font-size: 16px;
        width: 100%;
    
    .slides li display: none

JS

$('.flexslider').flexslider();

$(".slides h1, .slides p").fitText();  ​

【参考方案1】：

Flexslider 的 CSS 隐藏了所有 li 元素，这些元素随后由 flexslider() 显示，因此无法评估 fitText() 所针对的文本，除非它位于第一个最初可见的幻灯片中。我尝试通过在 Flexslider 之前运行它来解决这个问题：

var slider = $('.flexslider'),
    hiddenSlides = slider.find('.slides > li:not(".slides > li.flex-active-slide")'),
    text = hiddenSlide.find('.text');

hiddenSlide.show();

text.fitText();

hiddenSlide.hide();

这解决了load 上的问题。我还尝试将其包装在一个函数中并在 resize 事件上调用它，但这对我不起作用。如果有人能填空，那就太好了。

【参考方案2】：

希望这会有所帮助http://jsfiddle.net/adtVP/40/

路线图：

阅读关于 fitText 插件的 css 技巧的简短说明 采用 Paul Irish 的跨浏览器实现来修复不同浏览器中的 resize 事件

仅在此处将字体大小从 px 切换到 em（或任何其他相对值，如 %）：

...
h1 
    font-size: .5em;
    width: 100%;

p 
   font-size: .2em;
   width: 100%;

...

对适合文本的调用方式进行了一些修改

$(".slides").fitText();

这基本上会更新父级元素上的字体大小，这将对基于em 的子级字体生效，这就是整个想法。

每次使用 Paul 的 sn-p 代码调整窗口大小时，也会调用 fit Text。

就是这样，代码很粗糙，需要清理和浏览，但可以。

UPD：来自 fitText 的 github 源代码在 IE 中因 mime 类型不匹配而被阻止，这导致了问题。 作为替代解决方案，您可以在 js 文件中包含正确类型的源代码，这样就可以了。

旧的IE不工作例子在这里http://jsfiddle.net/adtVP/35/留在这里记录一下，上面新的用IE调试工具栏测试到7版本，肯定不一样真正的浏览器，但到目前为止还不错。

【讨论】：

这很好，但在 IE 中不起作用。我真的需要它在 IE 8-9 中工作，并在 IE7 中降级。 IE8 不一定是完美的。

SEC7112：来自 raw.github.com/davatron5000/FitText.js/master/jquery.fittext.js 的脚本由于 mime 类型不匹配而被阻止 2 SCRIPT438：对象不支持属性或方法“fitText”

那是 IE 的问题，它阻止了来自 github 的 fitText

感谢 jQuery 的 em 单元实现和 .slides 目标。太棒了！

【参考方案3】：

$('.flexslider').flexslider(
before: function(slider) 
    $(".slides h1, .slides p").css("color","#ffffff"); 

  ,

after: function(slider) 
    $(".slides h1, .slides p").css("color","#000000"); 
    $(".slides h1, .slides p").fitText(); 

  
);

 $(".slides h1, .slides p").fitText(); 

【讨论】：

不，因为有一些没有样式的内容。 jsfiddle.net/simply_simpy/Duam2/2

好吧，我在 jsfiddle 中所做的更改。实际上，slides hide 属性隐藏了所有 p 和 h1，因此 fitText 无法对其添加更改。

让我们试试这个 - 把整个代码除了 - $(".slides h1, .slides p").fitText();在函数中并在