我怎样才能让我的网站响应？我正在使用 glitch.com答案

【问题标题】：How Can I Make My Website Responsive? I'm using glitch.com我怎样才能让我的网站响应？我正在使用 glitch.com
【发布时间】：2021-08-30 02:31:24
【问题描述】：

我希望我的网站能够响应并适应任何设备。我正在使用 glitch.com 创建这个网站。例如在 mac os 上，当我将我的网站设置为全屏时，会有一个滚动条，即使我认为我不希望有一个滚动条。如何实现响应式网站？我试过在不同的设备上缩小我的网站，但它不起作用。另外，我在下面提供了一些图片和代码（包括我的网站）。

网站：

https://runturtle.glitch.me/

代码：

@import url("https://fonts.googleapis.com/css2?family=Rubik&display=swap");

#fname {
  margin-bottom: 10px;
}
h1 {
  font-weight: bold;
  color: #dde6d8;
}
* {
  font-family: "Rubik";
  user-select: none;
}
form {
  margin: auto;
}
::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #a0a0a0;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

h1 {
  align-items: center;
}
h3 {
  color: #dde6d8;
}
input {
  margin: 0 auto;
  border: none;
  color: black;
  background-color: rgb(white);
  width: 50%;
  height: 15px;
  outline: none;
  padding: 9px 10px;
  border-radius: 4px;
}
button {
  color: #183505;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  background-color: #4d7135;
  outline: none;
  border-radius: 4px;
}
button:hover {
  opacity: 0.8;
}
button:active {
  cursor: loading;
}

body {
  margin: 0;
  padding: 0;
  background: #1f2f15;
  font-family: ubuntu;
  color: white;
}

header {
  display: flex;
  align-items: center;
  background: #486b2c;
}

header img {
  width: 50px;
  background: white;
  border-radius: 5px;
  margin: 0 20px 0 40px;
}

.dashboard {
  width: 150px;
  height: 800px;
  position: absolute;
  left: 10px;
  top: 81px;
}

.home {
  opacity: 1;
  width: 150px;
}

article {
  background: #131b0b;
  width: 50%;
  margin: 20px auto;
  border-radius: 10px;
  padding: 10px;
}

hr,
article .date {
  color: #a0a0a0;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Run Turtle</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <header>
      <img
        src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
        width="50px"
      />
      <h1><strong>Run Turtle</strong></h1>
    </header>
    <main>
      <article class="dashboard">
        <h1>Dashboard</h1>
        <hr />
        <button
          onClick="window.location.href='https://runturtle.glitch.me';"
          class="home"
        >
          Home
        </button>
        <br />
        <br />
        <button
          onClick="window.location.href='register.html';"
          class="register"
        >
          Register
        </button>
      </article>
      <article>
        <h1>Welcome to Run Turtle</h1>
        <hr />
        <p>
          Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
          left.
        </p>
      </article>
    </main>
    <script src="index.js"></script>
  </body>
</html>

这是调整浏览器大小时的图像：

【问题讨论】：

标签： html css web

【解决方案1】：

您可以将引导网格系统用于响应式网站。布局采用行和列的形式，可以根据设备大小进行调整。
这是文档link。

【讨论】：

Bootstrap 完全覆盖了我的 CSS。
只有在我将 CSS 样式表链接放在引导程序之前时才会发生这种情况。您确定这不是导致问题的原因吗？
好吧，我修好了。它显示了 CSS，但它弄乱了我元素的大小和尺寸，并且效果不佳。这是我使用引导程序制作的测试网站：marshy-massive-chess.glitch.me

【解决方案2】：

就我个人而言，我喜欢 AMP（Accelerated Mobile Pages）。我自己将它用于我的网站，它适用于页面布局。

AMP 有一个页面介绍如何设置 HTML 文档以制作响应式移动页面。 Here is the article

【讨论】：

它完全覆盖了我的 CSS。
您能详细说明一下吗？您是指内容相互碰撞和重叠吗？

【解决方案3】：

我建议你遵循@media 规则。 CSS Grid Layout Module 将帮助您解决出现的问题。例如，我放了一个解决方案代码。 screenshot_1 screenshot_2

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    * {
        box-sizing: border-box;
    }

    header {
        display: flex;
        align-items: center;
        background: #486b2c;
    }

    header img {
        width: 50px;
        background: white;
        border-radius: 5px;
        margin: 0 20px 0 40px;
    }

    .menu {
        float: left;
        width: 25%;
        text-align: center;
    }

    .menu article {
        background-color: #1f2215;
        padding: 8px;
        height: 800px;
        margin-top: 7px;
        display: block;
        width: 100%;
        color: black;

    }

    input {
        margin: 0 auto;
        border: none;
        color: black;
        width: 50%;
        height: 15px;
        outline: none;
        padding: 9px 10px;
        border-radius: 4px;
    }

    button {
        color: #183505;
        border: none;
        cursor: pointer;
        padding: 5px 10px;
        background-color: #4d7135;
        outline: none;
        border-radius: 4px;
    }

    button:hover {
        opacity: 0.8;
    }

    button:active {
        cursor: loading;
    }

    body {
        margin: 0;
        padding: 0;
        background: #1f2f15;
        font-family: ubuntu;
        color: white;
    }

    .main {
        float: left;
        width: 60%;
        padding: 0 20px;
    }

    h1 {
        font-weight: bold;
        color: #dde6d8;
    }



    @media only screen and (max-width: 620px) {

        .menu,
        .main {
            width: 100%;

        }

        .menu {
            height: 200px;
        }

        .main {
            background: #1f2f15;
            height: 600px;
        }

    }
</style>
</head>

<body style="font-family:Verdana;">

    <div>
    <header>
        <img src="https://cdn.glitch.com/1c916b3c-8432-490c-9650-264f03c95b9e%2Frss-icon.png?v=1630185994030"
            width="50px" />
        <h1><strong>Run Turtle</strong></h1>
    </header>
</div>

<div>
    <div class="menu">

        <article>
            <h1>Dashboard</h1>
            <hr />
            <button>
                Home
            </button>
            <br />
            <br />
            <button>
                Register
            </button>
        </article>
    </div>

    <div class="main">
        <h1>Welcome to Run Turtle</h1>
        <hr />
        <p>
            Welcome to Run Turtle. Navigate Run Turtle with the dashboared on the
            left.
        </p>
    </div>


</div>

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。