引导:不能使页面响应所有屏幕

Question

我正在用Vue.js为我的项目制作一个登陆页面，它在大屏幕上看起来不错，但在平板电脑和智能手机屏幕上却很糟糕。为了获得最好的结果，我试着遵循Bootstrap文档的所有说明，但我完全迷上了小屏幕。我如何修改它，以便正确地显示它并在小屏幕上清洁？

<template>

  <div class="container-fluid m-0 p-0">
    <nav class="navbar navbar-expand-lg navbar-custom">
  <a class="navbar-brand " href="http://exaple.com/">
  
    <img src="../assets/logo.png" width="40" height="40" class="d-inline-block align-top" alt="">
      example.com
      </a>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
       
      <li class="nav-item active">
        <a class="nav-link" href="#sigUP" style="color:white;">Signin</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#mission" style="color:white;">Mission</a>
      </li>
      </ul>
    </div>
    </nav>
    <div id="home-page" class="full-height p-4">
      <div class="container pt-500">

        <div class="row pb-6 pt-20">
          <div class="col-lg-6  my-auto ">
            <div class="text-right text-down mb-3 d-block d-lg-none">
              <h1 class ="text-color text-right text-down">Hello,</h1>
              <h1 class="display-1 text-color text-right text-down">Betatester!</h1>
            </div>
            
          </div>

          <div class="col-lg-6 my-auto pt-6">
            <div class="text-right text-down mb-3 d-none d-lg-block">
              <h1 class ="text-color text-right text-down">Hello,</h1>
              <h1 class="display-1 text-color text-right text-down" >Betatester!</h1>
            </div>
 </div>
        </div>

      </div>
    </div>

 

    <div id="about" class="bg-light p-3 p-md-5">
       <h1 class="display-1 text-color-about text-center"  >example.com is </h1>
      <div class="row">
        
        <div class="col-lg">
            <h1 class="ml-md-4 mr-md-4 text-left" >
            the socialnetwork for you
          </h1>
          <h1 class="ml-md-4 mr-md-4 text-left text-color-about_p" >Freetime</h1>
          <img src="../assets/exam1.png" height="100">
          <img src="../assets/exam1.png" height="100">
          <img src="../assets/exam1.png" height="100">
        </div>
        
         <div class="col-lg">
          <img src="../assets/about.png" height="300" class="m-4">
        
        </div>
        
      </div>
    </div>







    <div id="marketplace" class=" p-4"> 
       <div class="row">
         <div class="col-lg">
          <img src="../assets/marketplace.png" height="400">
         </div>
          <div class="col-lg">
            <h1 class="ml-md-4 mr-md-4 text-right" >
<h1 class="ml-md-4 mr-md-4 text-right text-color-about_m" >MARKETPLACE</h1>
            
            where you can find all you need
            </h1>
          </div>
       </div>
    </div>


  <div id="shops" class=" p-4"> 
        <div class="row">
          
            <div class="col-lg">
              <h1 class="ml-md-4 mr-md-4 text-left" >
               the place where you can contact your
              <h1 class="ml-md-4 mr-md-4 text-left text-color-about_s p-4" >FAVORITE </h1>
              <h1 class="ml-md-4 mr-md-4 text-left text-color-about_p" >STORE</h1>
              
              </h1>
            </div>

            <div class="col-lg">
            <img src="../assets/shop.png" height="400">
          </div>

        </div>
      </div>



      <div id="comp" class=" p-4"> 
       <div class="row">
         <div class="col-lg">
          <img src="../assets/comp.png" height="400">
         </div>
          <div class="col-lg">
            <h1 class="ml-md-4 mr-md-4 text-right" >
             be
            <h1 class="ml-md-4 mr-md-4 text-right text-color-about_m" >COMPETITIVE</h1>
            blablablablablablablalbalba
            </h1>
          </div>
       </div>
    </div>





    <div id="mission" class=" p-4"> 
        <div class="row">  
            <div class="col-lg">
              <h1 class="ml-md-4 mr-md-4 text-left" style="display: inline-block" >
               the 
              <h1 class="ml-md-4 mr-md-4 text-left text-color-about_s" style="display: inline-block" > MISSION </h1>
              </h1>
              <h3 class="ml-md-4 mr-md-4 text-left">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dolor neque. Vivamus id ultrices nunc. Proin vulputate iaculis tortor ac rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in lobortis diam, eu ullamcorper ante. Pellentesque sodales felis sit amet metus laoreet sodales. Proin auctor nulla vitae porta pretium. Nullam tempor blandit sem vitae finibus.
          </h3>
            </div>
            <div class="col-lg">
            <img src="../assets/mission.png" height="400">
          </div>
        </div>
        

      </div>


      <div id="betatest" class=" p-3"> 
        <div class="row justify-content-center">
          <div class="col-lg">
          </div>
            <h1 class="ml-md-0 mr-md-0   text-center display-1">
              Why you'll be 
            
            <h1 class="ml-md-4 mr-md-4 text-center  text-color-about_b display-1">
              Betatester?
            </h1>
            </h1>
            
        </div>
        <div class="row ">
          <div class="col-lg">
          <h1 class="ml-md-4 mr-md-4 text-center" style="font-size: 4em;">
                be<h1 class="ml-md-4 mr-md-4 text-center" style="display: inline-block; color:white;font-size: 4em;font-size: 1.2em">BETATESTER</h1> helps us to make the best experience possible on example.com
          </h1>
          </div>
        </div>
        </div>

      <div id="sigUP" class=" p-2">
          <div class="row justify-content-center pd-8">
            <div class="col-lg pd-8">
              <h1 class="ml-md-4 mr-md-4 text-center display-2">
                Become
               
                <h1 class="ml-md-4 mr-md-4 text-center text-color-about_sn display-4">
                  a BETATESTER
                </h1>
              </h1>
            </div> 
          </div>
            <div class="row justify-content-center pd-8">
            <div class="col-lg ">
              <img src="../assets/player.png">
              <div class="row justify-content-center pd-8">
                <div class="col-lg ">
                  <a href="/#/signupPlayer" class="btn btn-primary btn-lg btn-custom align-self-end" role="button">Player</a>
                </div>
              </div>
              
            </div>
            <div class="col-lg ">
              <img src="../assets/store.png">
              <div class="row justify-content-center pd-8">
                <div class="col-lg ">
                  <a href="/#/signupStore" class="btn btn-primary btn-lg btn-customS " role="button">Store</a>
                </div>
              </div>
              
            </div>
          </div>
        </div>
<div id="contact" class="p-5">
      <div class="row justify-content-center mt-3 mb-3">

        <div v-if="show_contact == true" class="col-lg-4" style="color:white">
          <h2>Hai una domanda?</h2>
          <p>Contact us!</p>

          <div v-if="contact_notice != ''" class="alert alert-warning">
            there's a problem. {{contact_notice}}
          </div>

          <form @submit.prevent="sendContactMessage()">
            <div class="form-group text-left ">
              <input v-model="contact_email"
                     type="email"
                     class="form-control"
                     placeholder="............"
                     >
              <textarea v-model="contact_message"
                        class="form-control mt-3"
                        placeholder="..........."
                        rows="5"
              ></textarea>
            </div>
            <button type="submit" class="btn btn-primary">send</button>
          </form>
        </div>

        <div v-else>
          <h3>mail sent correctly!</h3>
          <p>thanks for contact us!.</p>
        </div>
      </div>

    </div>
<div id="footer" class=" p-4">
      <footer class="text-light p-4">
<small>&copy; 2020,example</small>
      </footer>
    </div>


  </div>

</template>

<style scoped>
  #home-page {
    background-color: #ff9e0b;
    background: url('../assets/bg_mt.jpg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  #about {
    min-height: 40vh;
  }

  #contact {
    background-color: #252223;
  }

  #marketplace {
    background-color: #ff9e0b;
  }

  #comp {
    background-color: #ff9e0b;
  }

  #footer {
    background-color: #252223;
  }

  #betatest {
    background-color: #ff9e0b;
  }

  .navbar-custom { 
            background-color:  #ff9e0b; 
        } 
        /* Modify brand and text color */ 
          
        .navbar-custom .navbar-brand, 
        .navbar-custom .navbar-text { 
            color: white !important;
            font-size: 1.5em !important; 
        }

  .text-color{
      color:white;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 600;
  }
  .text-color-about{
      color:#ff9e0b;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 600;
  }
  .text-color-about_p{
      color:#ff9e0b;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 800;
      font-size: 4em !important;
  }
  .text-color-about_s{
      color:#ff9e0b;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 800;
      font-size: 3em !important;
  }
  .text-color-about_m{
      color: white;
      font-family: 'Mountserrat',sans-serif;
      font-weight: 600;
      font-size: 3em !important;
  }
  .text-color-about_b{
      color:white;
      font-family: 'Mountserrat',sans-serif;
      align-self: center;
      font-weight: 800;
      font-size: 2em !important;
  }
  .text-color-about_sn{
      color:#ff9e0b;
      font-family: 'Mountserrat',sans-serif;
      align-self: center;
      font-weight: 800;
      font-size: 1em !important;
  }
  .bg-primary{
      color:#ff9e0b;
  }
  .bg-imgPlayer{
      contain: url(../assets/store-02.png);
      
  }
  .btn-customS{
      border-radius: 1rem;
      background-color: #f23838 !important;
  }
  .btn-custom{
      border-radius: 1rem;
      background-color: #ff9e0b !important;
  }
</style>

Answer 1

使用@media查询。

内置的引导媒体查询断点可以在这里找到：https://getbootstrap.com/docs/4.1/layout/overview/

您还可以添加自己的和/或覆盖CSS值使用！

你将不得不手动调整每一个主要屏幕的大小，即平板电脑和移动设备是一个好的开端，但是你当然可以改进，iPhones，安卓，Google等等。

这就是@media查询的样子，您只需将特定于该宽度的CSS代码放在其中，如下所示：

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 

  .some-element-class {
          width:85px; /* .... */
}
}