Question

我一直试图让我的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
            });
        })

Answer 1

您遗漏了用于定位ID whoText的主题标签。

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

Answer 2

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

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

JsFiddle

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

2 个答案: