【问题标题】:Having a hard time using flowtype.js to make my text more responsive很难使用 flowtype.js 使我的文本更具响应性
【发布时间】:2014-08-14 14:48:07
【问题描述】:

我一直在尝试使我的 wesbite 中的文本更具响应性,并且我一直在尝试使用 flowtype.js 在此处看到:http://simplefocus.com/flowtype/ 来完成此操作。但是,无论我做什么,它似乎都不起作用。更改视口时文本不会自行调整大小我在下面包含了我的代码和一个 jfiddle。任何帮助将不胜感激!

Jfiddle:http://jsfiddle.net/4jy1dvxx/

HTML:

                    <div id="whoText">

                        <p class="header">Who we are</p>

                        <p class="boxText">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>

                        <p class="boxText">
        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Lati</p>

                    </div>

CSS:

#whoText {
    width:45%;
    float:left;
    height:500px;
}

#whatText {
    width:45%;
    float:right;
    height:500px;
}

#whiteBox {
    width:30%;
    float:right;
    height:500px;
}

#textContain {
    width:60%;
    display: inline-block;
    vertical-align: middle;
}

.header {
    font-family: 'Dosis', sans-serif;
    font-size:1.875em;
    font-weight:800;   
    text-align:left;
    color:#000;
    padding-bottom:20px;
}

.boxText {
    font-family: 'Josefin Slab', serif;
    font-weight: 600;
    font-size:1.063em;
    color:#000;
    text-align:left;
    line-height:23px;
    padding-bottom:15px;
}

JS:

        $(document).ready(function() {
            $('whoText').flowtype({
                minimum   : 500,
                maximum   : 1200
            });
        })

【问题讨论】:

    标签: javascript jquery css plugins jquery-plugins


    【解决方案1】:

    您缺少用于定位 ID whoText 的主题标签。

    $(document).ready(function() {
            $('#whoText').flowtype({
                minimum   : 500,
                maximum   : 1200
            });
        })
    

    【讨论】:

      【解决方案2】:

      尝试将选择器设置为body 而不是whoText,例如:

      $(document).ready(function() {
          $('body').flowtype({
                  minimum   : 500,
                  maximum   : 1200});
       })
      

      JsFiddle

      【讨论】:

      • 感谢@lpg 成功了!但是我想知道是否可以针对 body 之外的特定元素
      猜你喜欢
      • 2020-08-03
      • 2022-11-17
      • 2016-12-11
      • 2023-03-31
      • 2022-11-23
      • 2014-01-29
      • 1970-01-01
      • 1970-01-01
      • 2016-09-18
      相关资源
      最近更新 更多