为什么我的响应式设计的 HTML 结构无法正常工作？

问题描述 投票：0回答：1

我正在研究一种具有相关 CSS 的 HTML 响应式结构，从纸面上看，它应该非常简单，但最终对我来说一点也不简单。
在该结构中，有一个具有固定位置的 navigator 的 header，以及一个带有一些内部 DIV 的 DIV，这些内部 DIV 具有必须设置固定宽度的 countdown 类。在代码示例中，我只插入了其中之一，但添加其他内容不会改变问题的本质。
发生的事情对我来说很奇怪：只有导航器和固定宽度的 DIV 正确减少，而其余部分，包括 body ，减少得更多。 我不太知道如何修复CSS。我做了一些测试，结果很差。
谁能告诉我发生了什么事以及如何解决它？
我附上完整但简化的代码：显然，这只是一个方案，但涉及的所有元素都在那里。

<!DOCTYPE html>
  <html lang="EN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="style.css">
    <style>
      body{
        border: 2px solid Crimson;
        /* max-width: 1350px; */
        font-weight: 500;
        line-height: 35px;
        text-rendering: optimizeLegibility;
        background-color: salmon;
        -webkit-text-size-adjust:none;
      }
      header{
        margin: 0 auto 3em auto;
        height: auto;
        text-align: center;
        border: 1px solid #f00;
      }
      .navigator{
        position: fixed;
        width: 100%;
        padding: 2vh 5vw;
        background: red;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: none;
        transition: all 0.3s ease;
        z-index: 100;
      }
      .navigator .menuVoices {
        border: 1px solid blue;
        width: 80vw;
        padding: 15px;
        margin: 0 auto;
        vertical-align: middle;
      }
      h1{
        margin-top: 1.5vh;
        padding-left: 1vw;
      }
      section{
        width: 100%;
        height: auto;
        padding: 2.5em;
        margin: auto;
        font-size: 25px;
        font-weight: 200;
        text-align: justify;
        color: #f7f9ef;
        background-color:#f15985;
      }
      .wrap {
        border: 1px solid blue;
        height: auto;
        margin: auto;
        width: 100%;
      }
      .countdown {
        border: 1px solid black;
        width: 1310px;
        height: 20vh;
        text-align: center;
        margin: 0 auto;
      }
      .countdown .bloc-time {
        float: left;
        margin-right: 45px;
        text-align: center;
      }
      .countdown .bloc-time:first-child {
        margin-left: 23px;
      }
      .countdown .bloc-time:last-child {
        margin-right: 0;
      }
      .countdown .figure {
        position: relative;
        float: left;
        height: 110px;
        width: 100px;
        margin-right: 10px;
        background-color: yellow;
      }
      footer {
        max-width: 2000px;
        width: 100%;
        height: 900px;
        text-align: center;
        background: Azure;
        margin: 3vh auto 0 auto;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body>
  <header>
    <div class="navigator">
      <div class="menuVoices"></div>
    </div>
  </header>
  <section>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
  </section>
  <h1>TESTING FOR RESPONSIVE</h1>
  <div class="wrap">
    <div class="countdown">
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
    </div>
  </div>
  <footer>

  </footer>
  </body>
</html>

我们将不胜感激每一个帮助。

html css responsive-design
1个回答
0
投票

出于语义和可访问性目的，我冒昧地使用 

<main>
、
<nav>
标签改进了 HTML。

关于 CSS，我认为您最好学习 CSS flexbox 和 grid，因为它们将有助于您网站的布局和响应能力。了解媒体查询也将帮助您了解更详细和具体的细节，但在本示例中不需要。我在这里介绍了 Flexbox，因为您的布局要求很简单。我删除了 CSS 中的一些不必要的属性，因为它们会产生更多问题，例如在某些元素上设置固定的宽度和高度 - 这些值相互冲突并扭曲布局。如果您想要动态的响应式布局，请避免静态值并主要依赖 

padding
、
margin
、
flex
/
grid
。当然，某些组件（如图标、菜单、面板、徽章等）将需要这些详细信息。

我在下面提供了我的解决方案。如果您有任何疑问，请告诉我。

body {
  border: 2px solid Crimson;
  margin: 0 auto;
  max-width: 1350px;
  background-color: salmon;
}
header {
  margin: 0 auto 3em auto;
  text-align: center;
  border: 1px solid #f00;
}
nav {
  position: fixed;
  width: 100%;
  padding: 2vh 0;
  background: red;
  left: 0;
  top: 0;
  z-index: 1;
}
nav .menuVoices {
  border: 1px solid blue;
  max-width: 80vw;
  padding: 15px;
  margin: auto auto;
/*   vertical-align: middle; */
}

section {
/*   width: 100%; */
  height: auto;
  padding: 2.5em;
/*   margin: auto; */
  font-size: 25px;
  font-weight: 200;
  text-align: justify;
  background-color: pink;
}
.wrap {
  border: 1px solid blue;
  margin: 0 23px;
}
.countdown {
  border: 1px solid black;
  max-width: 1310px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.countdown .bloc-time {
    display: flex;
    flex-wrap: wrap;
    background-color: green;
    text-align: center;
}
.countdown .bloc-time:first-child {
/*   margin-left: 23px; */
}
.countdown .bloc-time:last-child {
/*   margin-right: 0; */
}
.countdown .figure {
  height: 110px;
  width: 100px;
  background-color: yellow;
}
footer {
  max-width: 2000px;
  height: 90px;
  text-align: center;
  background: grey;
  margin: 3vh auto 0 auto;
  overflow-x: hidden;
}
<body>
  <header>
    <nav class="navigator">
      <div class="menuVoices"></div>
    </nav>
  </header>
  <section>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
  </section>
  <main class="wrap">
    <h1>TESTING FOR RESPONSIVE</h1>
    <div class="countdown">
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
      <div class="bloc-time">
        <div class="figure"></div>
        <div class="figure"></div>
      </div>
    </div>
  </main>
  <footer>
      Footer
  </footer>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.