css 响应代码无法在移动的中使用fullpage.js

rggaifut 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(96)

我在我的页面上使用fullpage.js，它工作正常。我在移动的设备上遇到了一些问题。我的意思是我为移动设备添加了一些响应代码，但它不工作。

$(document).ready(function() {

  //initialising fullpage.js in the jQuery way
  $('#fullpage').fullpage({
    sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c', '#fec401'],
    navigation: true,
    slidesNavigation: true,
  });
});

@media all and (max-width: 768px) {
  .a-herosliderContent h2 {
    font-size: 80px;
  }
  .a-herosliderContent p {
    font-size: 40px;
  }
}

<link rel="stylesheet" type="text/css" href="https://alvarotrigo.com/fullPage/fullpage.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="fullpage">
  <div class="section slide01 banner-bg">
    <div class="a-heroslider">
      <div class="a-herosliderContent centerFromTop">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
        <div class="a-heroCTA a-allCTA"><a href="aboutus">About Us <span><i class="fas fa-chevron-circle-right"></i></span></a></div>
      </div>
    </div>
  </div>
  <div class="section slide02 banner-bg">
    <div class="a-heroslider">
      <div class="a-herosliderContent centerFromTop">
        <h2>Lorem ipsum dolor sit amet,</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
        <div class="a-heroCTA a-allCTA"><a href="product-category">View Products <span><i class="fas fa-chevron-circle-right"></i></span></a></div>
      </div>
    </div>
  </div>
  <div class="section slide03 banner-bg">
    <div class="a-heroslider">
      <div class="a-herosliderContent centerFromTop">
        <h2>Lorem ipsum dolor sit amet,</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        </p>
        <div class="a-heroCTA a-allCTA"><a href="service">View Services <span><i class="fas fa-chevron-circle-right"></i></span></a></div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://alvarotrigo.com/fullPage/fullpage.js"></script>

css

来源：https://stackoverflow.com/questions/64987158/responsive-code-is-not-working-in-mobile-with-fullpage-js

1条答案

按热度按时间

ajsxfq5m1#

我把这些线去掉

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://alvarotrigo.com/fullPage/fullpage.css" />
<script type="text/javascript" src="https://alvarotrigo.com/fullPage/fullpage.js"></script>

我在代码中添加了以下代码行：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

<!-- fullPage CSS and JS -->
<link rel="stylesheet" type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" />
<script type="text/JavaScript"
    src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.extensions.min.js"></script>

我希望我能帮上忙

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        @media all and (max-width: 768px) {
            .a-herosliderContent h2 {
                font-size: 80px;
            }

            .a-herosliderContent p {
                font-size: 40px;
            }
        }
    </style>

    <!-- bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

    <!-- fullPage CSS and JS -->
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" />
    <script type="text/JavaScript"
        src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.extensions.min.js"></script>

</head>
<body>

    <div id="fullpage">
        <div class="section slide01 banner-bg">
            <div class="a-heroslider">
                <div class="a-herosliderContent centerFromTop">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>
                    <div class="a-heroCTA a-allCTA"><a href="aboutus">About Us <span><i
                                    class="fas fa-chevron-circle-right"></i></span></a></div>
                </div>
            </div>
        </div>
        <div class="section slide02 banner-bg">
            <div class="a-heroslider">
                <div class="a-herosliderContent centerFromTop">
                    <h2>Lorem ipsum dolor sit amet,</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>
                    <div class="a-heroCTA a-allCTA"><a href="product-category">View Products <span><i
                                    class="fas fa-chevron-circle-right"></i></span></a></div>
                </div>
            </div>
        </div>
        <div class="section slide03 banner-bg">
            <div class="a-heroslider">
                <div class="a-herosliderContent centerFromTop">
                    <h2>Lorem ipsum dolor sit amet,</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>
                    <div class="a-heroCTA a-allCTA"><a href="service">View Services <span><i
                                    class="fas fa-chevron-circle-right"></i></span></a></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {

            //initialising fullpage.js in the jQuery way
            $('#fullpage').fullpage({
                sectionsColor: ['#ff5f45', '#0798ec', '#fc6c7c', '#fec401'],
                navigation: true,
                slidesNavigation: true,
            });
        });
    </script>

</body>
</html>

赞(0）回复(0）举报 2022-12-15

我来回答

css 响应代码无法在移动的中使用fullpage.js

1条答案

相关问题

热门标签

最新问答