使网页在中小屏幕上响应

Question

我正在使用 Bootstrap 4. 这是我的网页在大屏幕上的样子：

在中等屏幕上，它如下所示：

如何更改我的代码，使“Lorem Ipsum”文字不会在中等屏幕和较小的屏幕上显示？

此外，在小屏幕上，我如何更改我的代码以使文本“Carlos Qiano”在顶部和底部具有相等的间距：

这是我的 HTML 和 CSS 需要修改的代码：

<!DOCTYPE html>
<html>
   <head>
       <title>Background Image</title>
       <meta charset="utf-8"></meta>
       <meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>

   <style type="text/css">
    /*body{
    margin-top: 53px;
    }*/

    .jumbotron {
    background-image: url("background1.jpg");
    text-align: center;
    height:522px;
    background-size: cover;
    }

   </style>

   <body>                 
    <section id="page-top">
            <div class="jumbotron">
              <p data-aos="zoom-out" data-aos-delay="500" style="font: 120px Verdana,sans-serif; margin-top: 35px; color: black; animation-duration: 2s; animation-iteration-count:infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate">Carlos Qiano</p>
              <p data-aos="zoom-out" data-aos-delay="500" style="font: 20px Georgia,serif;font-style:italic; line-height: 1.6; color:black;animation-duration:2s;animation-iteration-count:infinite; animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate d-none d-md-block">Lorem Ipsum.<br>Lorem Ipsum.</p>
            </div>
        </section>
   </body>
</html>

Answer 1

请找到下面的示例代码。那应该可以满足你的要求。

.jumbotron {
    height: 100vh;
    background-image: url("background1.jpg");
    text-align: center;
    background-size: cover;
    margin:0 !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.mainText {
    width: 100%;
    font-family: Verdana,sans-serif;
    font-size: 120px !important;
    color: black;
    margin: 0 0 5rem 0;
    animation-duration: 2s;
    animation-iteration-count:infinite;
    animation-delay: 1s;
}

.subText {
    font-size: 20px;
    font-family: Georgia,serif;
    font-style:italic;
    line-height: 1.6;
    color:black;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-delay:1s;
}

@media screen and (max-width: 768px) {
  .mainText {
    margin-bottom: 0;
  }
  
  .subText {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
   <head>
       <title>Background Image</title>
       <meta charset="utf-8"></meta>
       <meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>

   <body>                 
    <section id="page-top">
        <div class="jumbotron">
          <p data-aos="zoom-out" data-aos-delay="500" class="lead mainText pulse green aos-init aos-animate">Carlos Qiano</p>
          <p data-aos="zoom-out" data-aos-delay="500" class="lead pulse lightGreen aos-init aos-animate d-md-block subText">Lorem Ipsum.<br>Lorem Ipsum.</p>
        </div>
    </section>
   </body>
</html>

使网页在中小屏幕上响应

Making the webpage responsive on medium and small screen

html

css

frontend

responsive-design

bootstrap-4