如何使我的网站在移动设备上看起来更好？

Question

我创建了一个基本网站来提高我的前端技能。我使用 Bootstrap 5 使其响应，但它在 phone 上看起来不太好。有人可以告诉我我做错了什么吗？在我的移动设备上，它看起来像这样：

enter image description here

我把浏览器缩小的时候还挺好看的，但是放到github上线的时候，页面好像被切了一样。

Html :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ping</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
  <script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
  <div class="row">
    <div class="col d-flex justify-content-center pt-2">
      <img src="./images/logo.svg">
    </div>
  </div>

  <div class="row">
    <div class="col d-flex justify-content-center flex-row pt-4">
      <h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
    </div>
  </div>

  <div class="row">
    <div class="col d-flex justify-content-center">
        <span class="text-black">Subscribe and get notified</span>
    </div>
  </div>

  <div class="row">
    <div class="col d-flex justify-content-center pt-5">
    <div>
      <form class="d-flex flex-row">
        &nbsp<input class="form-control" id="email" placeholder="Your email adress...">&nbsp
        <button type="button" id="submit">Submit</button>
      </form>
      <p class="container-fluid firstp"></p>
    </div>
    </div>
  </div>

  <div class="row">
    <div class="col d-flex justify-content-center">
      <img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
    </div>
  </div>

  <footer class="row">
    <div class="col d-flex justify-content-center flex-row pt-5">
      <a href="https://pt-br.facebook.com/"><i class="fab fa-facebook"></i></a>&nbsp&nbsp
      <a href="https://twitter.com/"><i class="fab fa-twitter"></a></i>&nbsp&nbsp
      <a href="https://www.instagram.com/"><i class="fab fa-instagram"></a></i>
    </div>
    <div class="container d-flex justify-content-center">
      <p>&copy; Copyright Ping. All rights reserved.</p>
    </div>
  </footer>
















  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>

css:

#email{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    width: 330px;
    height: 45px;
    border-color: gainsboro;
}

#submit{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    width: 150px;
    height: 48px;
    background-color: blue;
    color: white;
    border: none;
}

#submit:hover{
    background-color: rgb(124, 111, 204);
}

.firstp{
    padding-right: 55px;
}



.imgdash{
    width: 100%;
    max-width: 400px;
    height: auto;
}

Answer 1

在表单元素上添加 flex-wrap 和 justify-content-center class，将解决您的问题。同时在 input 和 button 元素上添加 mb-2 class。

下面的代码片段也已更新，我希望它能解决您的问题。谢谢

#email {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  width: 330px;
  height: 45px;
  border-color: gainsboro;
}

#submit {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  width: 150px;
  height: 48px;
  background-color: blue;
  color: white;
  border: none;
}

#submit:hover {
  background-color: rgb(124, 111, 204);
}

.firstp {
  padding-right: 55px;
}

.imgdash {
  width: 100%;
  max-width: 400px;
  height: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ping</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
  <script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>

<body style="overflow-x: hidden;">
  <div class="row">
    <div class="col d-flex justify-content-center pt-2">
      <img src="./images/logo.svg">
    </div>
  </div>

  <div class="row">
    <div class="col d-flex justify-content-center flex-row pt-4">
      <h1 class="text-muted font-weight-normal">We are launching<span class="text-black"> soon!</span></h1>
    </div>
  </div>

  <div class="row">
    <div class="col d-flex justify-content-center">
      <span class="text-black">Subscribe and get notified</span>
    </div>
  </div>

  <div class="row">
    <div class="col d-flex justify-content-center pt-5">
      <div>
        <form class="d-flex flex-row flex-wrap justify-content-center">
          &nbsp<input class="form-control mb-2" id="email" placeholder="Your email adress...">&nbsp
          <button class="mb-2" type="button" id="submit">Submit</button>
        </form>
        <p class="container-fluid firstp"></p>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col d-flex justify-content-center">
      <img src="./images/illustration-dashboard.png" class="img.fluid imgdash">
    </div>
  </div>

  <footer class="row">
    <div class="col d-flex justify-content-center flex-row pt-5">
      <a href="https://pt-br.facebook.com/"><i class="fab fa-facebook"></i></a>&nbsp&nbsp
      <a href="https://twitter.com/"><i class="fab fa-twitter"></a></i>&nbsp&nbsp
      <a href="https://www.instagram.com/"><i class="fab fa-instagram"></a></i>
    </div>
    <div class="container d-flex justify-content-center">
      <p>&copy; Copyright Ping. All rights reserved.</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>

</html>

Answer 2

我看到的是您使用了很多 .col 。您需要为小型和大型设备指定 .col。否则它的某些功能将会中断。看看这个 link： https://getbootstrap.com/docs/5.0/layout/columns/#column-breaks 你看这个 link 里面用了很多 sm 修饰符。使用它们，您可以看到一些结果。

如何使我的网站在移动设备上看起来更好？

How do I make my website look better on mobile devices?

html

css

bootstrap-4