很难使用flowtype.js使我的文本更具响应性

Having a hard time using flowtype.js to make my text more responsive

本文关键字:文本 响应 我的 flowtype js 很难      更新时间:2023-09-26

我一直在努力使我的网站上的文本更敏感,我一直在尝试使用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
            });
        })

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

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

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

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

JsFiddle