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

问题描述

我希望我的网站能够响应并适应任何设备。我正在使用 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>

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

标签： htmlcssweb

我建议您遵循@media 规则。CSS Grid Layout Module 将帮助您解决出现的问题。例如，我放了一个解决方案代码。截图 _1 截图_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>

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

问题描述

解决方案

推荐阅读