FlowType.JS不工作

Question

我试图在本站上使用本站。

我脑子里有以下几点：

<script type='text/javascript' src='http://www.bibandtucker.net.au/test/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type="text/javascript" src="http://www.bibandtucker.net.au/test/wp-content/themes/blueduck3/js/flowtype.js"></script>
<script type="text/javascript">
  $('body').flowtype({
    minimum   : 500,
    maximum   : 1200,
    minFont   : 12,
    maxFont   : 40,
    fontRatio : 30
  });
</script>   

但是，当我使视口变小时，#content、H1和#菜单A、p.bookings、do时不会向下缩放。

有人知道为什么吗？谢谢。

Answer 1

请输入此代码，并确保在代码之前调用了flowtype.js。

    <script type="text/javascript"> 
        $j = jQuery.noConflict();
        $j(document).ready(function() {
            /*$j('body').flowtype({
                minimum   : 500,
                maximum   : 1200,
                minFont   : 12,
                maxFont   : 20
              });
              */
            $j("body").flowtype({
                minFont: 16,
                maxFont: 40,
                fontRatio: 65
            });
            $j("#heading").flowtype({
                fontRatio: 36
            });
            $j("#content p").flowtype({
                minFont: 12,
                maxFont : 22,
                fontRatio: 20
            });
            $j("#menu a").flowtype({
                minFont: 16,
                fontRatio: 5                    
            });
            $j("p.bookings").flowtype({
                minFont: 11,
                fontRatio: 30
            });
            $j("div.opening-hours").flowtype({
                minFont: 18,
                fontRatio: 30
            });
        });
    </script>

另外，请注意插件网站上提到的以下几行。

Line-height

在FlowType的v1.0中，我们将插件设置为一个特定的线高(以像素为单位).我们收到许多声明说，设置一条特定的直线高度是非常危险的.那我们做了什么？我们在1.1版中取消了对直线高度的支持。我现在该干啥？这很简单:在CSS中使用无单位的直线高度。它将根据字体大小自动进行更改。下面是我们建议的直线高度的一个例子: fontRatio : 30；

如果您有进一步的问题，那么请提到您的jsfiddle代码的链接。

Answer 2

这是因为您包含了2个jquery版本，jquery-2.1和jquery 1.6.4，在这两个版本中都存在冲突。你可以在控制台上看到它。

使用jquery.noConflict()不发生冲突