时间戳

首页 > 解决方案 > HTML 元视口正在削减我的布局。为什么会这样？

html - HTML 元视口正在削减我的布局。为什么会这样？

问题描述

我正在构建一个响应式网页。现在我将开始处理媒体查询，但是当我插入<meta name="viewport" content="width=device-width">并使屏幕变小时，我的页眉、第一节和页脚的部分背景被剪掉了，只剩下其中的一部分和带有文本的空白区域。您可以在片段中看到它。为什么会发生，我能做些什么来解决它？

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap');
body{
    font-family: 'Open Sans', sans-serif;
    margin: 0;
}
a{
    text-decoration: none;
    transition: 0.2s linear;
}
header{
    background-color: rgb(93, 158, 76);
    display: flex;
    align-items: center;
    padding: 0px 30px;
}
header img{
    width: 45px;
}
header h1{
    font-family: 'Doppio One', cursive;
    margin-left: 10px;
    color: rgb(214, 245, 210);
}
nav ul{
    display: flex;
    list-style: none;
}
nav ul li a{
    margin-left: 55px;
}
nav a{
    color: rgb(230, 245, 229);
    font-size: 17px;
}
nav a:hover{
    background-color: rgb(143, 182, 135);
    padding: 10px 15px;
    margin: 0 -15px 0 40px;
}
#firstsection{
    background-image: url(Images/coffee-3289259_1280.jpg);
    background-size: cover;
    height: 900px;
    position: relative;
}
#firstsection div{
    margin-top: 0;
    position: absolute;
    left: 100px;
    top: 150px;
    color: rgb(47, 119, 27);
    text-align: center;
}
#firstsection h1{
    margin-bottom: 45px;
}
#firstsection div a{
    font-weight: bold;
    border: 2px solid rgb(47, 119, 27);
    padding: 13px 30px;
    font-size: 16.5px;
    color: rgb(47, 119, 27);
}
#firstsection div a:hover{
    color: rgb(133, 163, 131);
    border: 2px solid rgb(133, 163, 131);
}
#textboxes{
    display: flex;
    margin-top: 50px;
}
#middlesection div div{
    text-align: center;
    margin: 15px 60px;
    border: 2px solid rgb(93, 158, 76);
    padding: 30px 30px;
}
#middlesection img:first-of-type{
    width: 55px;
}
#middlesection h2{
    text-align: center;
    width: 100%;
}
#lastsection{
    text-align: center;
}
#lastsection img{
    width: 500px;
    margin: 100px auto 0px;
}
#lastsection div{
    position: relative;
    bottom: 450px;
}
#lastsection div a:visited{
    color: blue;
}
footer{
    background-color: rgb(93, 158, 76);
    padding: 15px;
    color: rgb(214, 245, 210);
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
footer img{
    height: 35px;
    width: 35px;
    margin-right: 15px;
}
footer div{
    text-align: center;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Finances | Manage your money easily</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <meta name="description" content="Control you spending and manage your money easily. Your finances by the short hairs.">
        <meta name="author" content="Bruno M. B. Sdoukos">
        <meta name="keywords" content="finances, managing money, spending control">
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
    </head>
    <body>
        <header>
            <a href="index.html"><img src="Images/icons8-fund-accounting-80.png"></a>
            <a href="index.html"><h1>Finances</h1></a>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact us</a></li>
                    <li><a href="#">Register</a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section id="firstsection">
                <div>
                    <h1>Manage your money easily, anywhere, anytime.</h1>
                    <a href="#">Get started</a>
                </div>
            </section>
            <section id="middlesection">
                <div id="textboxes">
                    <div>
                        <img src="Images/icons8-increase-64.png">
                        <h3>Concrete data</h3>
                        <p>Simple but concrete data that are the answer to all the quesions about your current money, spending and.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-navigation-toolbar-left-filled-50 (1).png">
                        <h3>Easy interface</h3>
                        <p>An interface easy to use, made to you who want to manage your money faster and with no problems.</p>
                    </div>
                    <div>
                        <img src="Images/icons8-natural-user-interface-2-filled-50.png">
                        <h3>Fast access</h3>
                        <p>No complications that make you lose time. Just some clicks and done, you are in Finances, with all you need.</p>
                    </div>
                </div>
            </section>
            <section id="lastsection">
                <img src="Images/board-1362851_1280.png">
                <div>
                    <h2>Register now and enjoy<br>the best of Finances.</h2>
                    <a href="#">Create an account</a>
                </div>
            </section>
        </main>
        <footer>
            <img src="Images/icons8-fund-accounting-80.png">
            <div>
                <p>A work of Bruno Sdoukos.</p>
            </div>
        </footer>
    </body> 
</html>

标签： htmlcss

解决方案

对您的代码进行了一些更改。最初的问题是中段。当中间部分的宽度大于屏幕宽度时，会出现一个水平滚动条以允许用户查看其余内容。
要解决此问题，您可以根据屏幕的宽度使对齐方式垂直而不是水平。在下面的解决方案中，我包装了内容。

第二个问题是当标题中内容的宽度超过屏幕的宽度时，即容器的宽度试图与屏幕的宽度相同（记住meta name="viewport"）但内容溢出（因为它有一个更大的宽度）。
要解决此问题，您可以在菜单中显示标题项。在下面的解决方案中，我刚刚使它在标题（display: none）中不占用空间。例如解决方案可能是这样的。

注意：下面的解决方案没有优雅的样式，也许您可​​以在这里和那里添加填充以使其看起来优雅

<!DOCTYPE html>
<html>
  <head>
    <title>Finances | Manage your money easily</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <meta
      name="description"
      content="Control you spending and manage your money easily. Your finances by the short hairs."
    />
    <meta name="author" content="Bruno M. B. Sdoukos" />
    <meta
      name="keywords"
      content="finances, managing money, spending control"
    />
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://necolas.github.io/normalize.css/8.0.1/normalize.css"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
  </head>
  <body>
    <script>
      function myFunction() {
        var x = document.getElementById("topulid");
        if (x.className === "topul") {
          x.className += " responsive";
        } else {
          x.className = "topul";
        }
      }
    </script>
    <header>
      <a href="index.html"><img src="Images/icons8-fund-accounting-80.png"/></a>
      <a href="index.html"><h1>Finances</h1></a>
      <div class="topnav" id="myTopnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
      </div>
    </header>

    <main>
      <section id="firstsection">
        <div>
          <h1>Manage your money easily, anywhere, anytime.</h1>
          <a href="#">Get started</a>
        </div>
      </section>
      <section id="middlesection">
        <div id="textboxes">
          <div>
            <img src="Images/icons8-increase-64.png" />
            <h3>Concrete data</h3>
            <p>
              Simple but concrete data that are the answer to all the quesions
              about your current money, spending and.
            </p>
          </div>
          <div>
            <img
              src="Images/icons8-navigation-toolbar-left-filled-50 (1).png"
            />
            <h3>Easy interface</h3>
            <p>
              An interface easy to use, made to you who want to manage your
              money faster and with no problems.
            </p>
          </div>
          <div>
            <img src="Images/icons8-natural-user-interface-2-filled-50.png" />
            <h3>Fast access</h3>
            <p>
              No complications that make you lose time. Just some clicks and
              done, you are in Finances, with all you need.
            </p>
          </div>
        </div>
      </section>
      <section id="lastsection">
        <img src="Images/board-1362851_1280.png" />
        <div>
          <h2>Register now and enjoy<br />the best of Finances.</h2>
          <a href="#">Create an account</a>
        </div>
      </section>
    </main>
    <footer>
      <img src="Images/icons8-fund-accounting-80.png" />
      <div>
        <p>A work of Bruno Sdoukos.</p>
      </div>
    </footer>
  </body>
</html>

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Doppio+One|Open+Sans&display=swap");
body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
}
a {
  text-decoration: none;
  transition: 0.2s linear;
}
header {
  background-color: rgb(93, 158, 76);
  display: flex;
  align-items: center;
}
header img {
  width: 45px;
}
header h1 {
  font-family: "Doppio One", cursive;
  margin-left: 10px;
  color: rgb(214, 245, 210);
}

.topnav {
  overflow: hidden;
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 500px;
  padding-left: 50px;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav .icon {
  display: none;
}

.icon {
  display: none;
}

#firstsection {
  background-image: url(Images/coffee-3289259_1280.jpg);
  background-size: cover;
  height: 900px;
  position: relative;
}
#firstsection div {
  margin-top: 0;
  position: absolute;
  left: 100px;
  top: 150px;
  color: rgb(47, 119, 27);
  text-align: center;
}
#firstsection h1 {
  margin-bottom: 45px;
}
#firstsection div a {
  font-weight: bold;
  border: 2px solid rgb(47, 119, 27);
  padding: 13px 30px;
  font-size: 16.5px;
  color: rgb(47, 119, 27);
}
#firstsection div a:hover {
  color: rgb(133, 163, 131);
  border: 2px solid rgb(133, 163, 131);
}
#textboxes {
  display: flex;
  /* flex-wrap: wrap; */
  margin-top: 50px;
  justify-content: space-around;
  flex-wrap: wrap;
}
#middlesection div div {
  text-align: center;
  /* margin: 15px 0px; */
  border: 2px solid rgb(93, 158, 76);
  padding: 30px 30px;
  max-width: 300px;
}
#middlesection img:first-of-type {
  width: 55px;
}
#middlesection h2 {
  text-align: center;
  width: 100%;
}
#lastsection {
  text-align: center;
}
#lastsection img {
  width: 500px;
  margin: 100px auto 0px;
}
#lastsection div {
  position: relative;
  bottom: 450px;
}
#lastsection div a:visited {
  color: blue;
}
footer {
  background-color: rgb(93, 158, 76);
  padding: 15px;
  color: rgb(214, 245, 210);
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
footer img {
  height: 35px;
  width: 35px;
  margin-right: 15px;
}
footer div {
  text-align: center;
}

@media screen and (max-width: 830px) {
  .topnav a {
    display: none;
  }
  .icon {
    float: right;
    display: block;
  }
}

推荐阅读