响应文本 - 功能未使用FitText和FlexSlider进行初始化

Question

我有一个使用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/" alt="" />
              <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/" alt="" />
              <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/" alt="" />
              <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();  ?

Answer 1

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

路线图：

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

3. 仅在此处将字体大小从 切换为px(em或任何其他相对值，例如 %)：

   ...
   h1 {
       font-size: .5em;
       width: 100%;
   }
   p {
      font-size: .2em;
      width: 100%;
   }
   ...
   

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

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

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

每次当窗口调整大小时，也会使用 Paul 的代码片段调用 fit Text。

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

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

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