FlowType调整大小问题

Question

因此，我尝试使用FlowType调整容器内的文本大小。

它似乎有效，但只有一点。我将flowtype函数定位到容纳所有文本的容器，然后sorta调整大小，但在容器开始调整大小为970px后，文本停止调整大小。

我必须对父容器做错事。因为我也有按钮定位问题。

HTML

<div class="content-holder clearfix">
    <div class="container">
        <div class="left-container">
            <div class="ads-container">
                <a href="" class="ad">
                    <div class="ad-img" style="background-image: url(http://oi64.tinypic.com/wlxieq.jpg);">
                        <div class="ad-content">
                            <div class="text-container">
                                <h1>ALL THE PARTS</h1>
                                <h2>YOU NEED</h2>
                                <p>CHECK OUT OUR LARGE SELECTION OF AUTO PARTS AND FIND EXACTLY WHAT YOU NEED</p>
                            </div>
                            <div class="btn-container">
                                <button type="button">Shop Now</button>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="middle-container"></div>
        <div class="right-container"></div>
    </div>
</div>

SASS

html
    font-family: 'Open Sans', sans-serif
    text-rendering: optimizeLegibility !important
    -webkit-font-smoothing: antialiased !important
    body
        .container
            width: 1200px
            margin: 0 auto
        .clearfix:after
            content: " "
            display: block
            height: 0
            clear: both
        button
            height: 37px
            width: 160px
            background-color: orange
            border-radius: 3px
            color: white
            font-size: 15px
            font-weight: 400
            font-style: italic
            cursor: pointer
            &:focus
                outline: none
            &:hover
                background-color: dark-orange
        .ads-container
            position: relative
            .ad
                height: 100%
                width: 100%
                .ad-img
                    width: 100%
                    height: 100%
                    background-size: cover
                    background-position: center
                    position: relative
                    padding-bottom: 100%
                    .ad-content
                        position: absolute
                        top: 0
                        height: 100%
                        width: 100%
                        color: white
                        text-align: right
                        padding: 5%
                        box-sizing: border-box
                        .text-container
                            width: 100%
                            height: calc(100% - 37px)
                            h1
                                font-weight: 400
                                font-style: italic
                                margin-bottom: 8px
                                text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.30)
                            h2
                                font-weight: 800
                                font-style: italic
                                margin-bottom: 20px
                                text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.30)
                            p
                                font-weight: 400
                                line-height: 1.5
                                margin-bottom: 30px
                                text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.30)
                                font-style: italic
                        .btn-container
                            width: 100%
                            height: 37px
         .content-holder
             .container
                 .left-container
                     //height: 300px
                     width: 25%
                     //background: purple
                     float: left
                     .ads-container
                         .ad
                             .ad-img
                                 .ad-content
                                     .text-container
                                         h1
                                             font-size: 1.3em
                                         h2
                                             font-size: 2.5em
                                         p
                                             font-size: 1em
                 .middle-container
                     height: 300px
                     width: 55%
                     background: yellow
                     float: left
                 .right-container
                     height: 300px
                     width: 20%
                     background: green
                     float: left
@media screen and (max-width: 1200px)
    html
        body
            .container
                width: 970px
@media screen and (max-width: 970px)
    html
        body
            .container
                width: 100%

FlowType Jquery

$('.ads-container .text-container').flowtype({
    //minimum   : 500,
    //maximum   : 1200,
    minFont   : 16,
    maxFont   : 40,
    fontRatio : 30
});