使网站真正响应的问题

Question

我已经研究 css 一段时间了，但是当我必须按照我想要的方式在页面中放置项目时，我总是很吃力。我正在做关于构建我自己的完全响应式模板的建议练习，我现在遇到 2 个问题：

1st ：我用 3 个项目制作了网格，显然它们是响应式的，但我想我已经注意到一个断点，之后如果我再缩小屏幕一点点，它就会变得响应式。

2nd : 我无法让页脚粘在页尾。如果我将位置固定，它会出现在网格的“上方”，我希望它固定在底部，就像它应该的那样。

我将图像和附加代码发送给您。我希望有人能帮助我，因为尝试学习它却无法完成我想要的东西是如此令人沮丧。

谢谢！

body
{
margin: 0 auto;
background-color: black;
height: 100vh;
padding: 0;
}

a{
color: white;
text-decoration: none;
}

.listaPrincipal{
    display: flex;
    text-decoration: none;
    list-style: none;
    margin: 0;
    padding: 10px;
    height: 5vh
}

.barraDeNavegacao
{
    background: red;
}


.bg{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    background: white;
}


li{
    padding: 10px;
}

#itemLista2,#itemLista3,#itemLista4{
    margin-left: auto;
}

.grid-wrapper{
    display: grid;
    grid: 20px;
    gap: 10px; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    justify-items: center;
    justify-content: space-around;
    height: 50vh
    }

.caixasInformativas{
    height: 50px;
    width: 50px;
    background-color: violet;
    padding: 130px;
    margin-top: 20px;
}

footer{
   bottom: 0;
    position: fixed;
    width: 100%;
    background-color: red;
    color: yellow;
    text-align: center;
}

<!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">
    <link rel="stylesheet" type="text/css" href="../CSS/cssHome.css">
    <title>  Layout Teste Aplicação    </title>
</head>
<body>
    <nav class="barraDeNavegacao">
        <ul class="listaPrincipal">
            <li id="itemLista1"> 
                <a href="">
                    Home
                </a>
            </li>
            <li id="itemLista2">
              <a href="cadastro.html">
               Cadastre-se
               </a> 
            </li>
            <li id="itemLista3">
                <a href="login.html">
                    Login
                </a> 
            </li>
            <li id="itemLista3">
                <a href="FAQ.html">
                    F.A.Q
                </a> 
            </li>
        </ul>
    </nav>
        <div class="bg">
            Nosso Objetivo
        </div>
     <div class="grid-wrapper">
            <div class="caixasInformativas">TESTE</div>
            <div class="caixasInformativas">TESTE</div>
            <div class="caixasInformativas">TESTE</div>     
    </div>
    <footer class="rodape">
        All rights reserved - 2021
    </footer>
</body>
</html>

Break Point

Footer Sticker

Answer 1

对于您的第一个问题，请使用媒体查询。我已经修复了第二个问题的代码。您所要做的就是在 grid-wrapper 中指定 min-height 而不是 height 。在那之后，如果你写 div 一切都会在 grid-wrapper 下。

body
{
margin: 0 auto;
background-color: black;
height: 100vh;
padding: 0;
}

a{
color: white;
text-decoration: none;
}

.listaPrincipal{
    display: flex;
    text-decoration: none;
    list-style: none;
    margin: 0;
    padding: 10px;
    height: 5vh
}

.barraDeNavegacao
{
    background: red;
}


.bg{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    background: white;
}


li{
    padding: 10px;
}

#itemLista2,#itemLista3,#itemLista4{
    margin-left: auto;
}

.grid-wrapper{
    display: grid;
    grid: 20px;
    gap: 10px; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    justify-items: center;
    justify-content: space-around;
    min-height: 50vh
    }

.caixasInformativas{
    height: 50px;
    width: 50px;
    background-color: violet;
    padding: 130px;
    margin-top: 20px;
}

footer{
    position: sticky;
    width: 100%;
    background-color: red;
    color: yellow;
    text-align: center;
}

<!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">
    <link rel="stylesheet" type="text/css" href="../CSS/cssHome.css">
    <title>  Layout Teste Aplicação    </title>
</head>
<body>
    <nav class="barraDeNavegacao">
        <ul class="listaPrincipal">
            <li id="itemLista1"> 
                <a href="">
                    Home
                </a>
            </li>
            <li id="itemLista2">
              <a href="cadastro.html">
               Cadastre-se
               </a> 
            </li>
            <li id="itemLista3">
                <a href="login.html">
                    Login
                </a> 
            </li>
            <li id="itemLista3">
                <a href="FAQ.html">
                    F.A.Q
                </a> 
            </li>
        </ul>
    </nav>
        <div class="bg">
            Nosso Objetivo
        </div>
     <div class="grid-wrapper">
            <div class="caixasInformativas">TESTE</div>
            <div class="caixasInformativas">TESTE</div>
            <div class="caixasInformativas">TESTE</div>
    </div>
    <footer>
    All Rights reserved.
    </footer>
    
</body>
</html>

Answer 2

很难准确猜出您最终想要的设计（尤其是紫色 div 的最小尺寸），但我会将内容包装到网格容器中并以这种方式修改当前内容：

* {
  box-sizing: border-box;
}
body {
  margin           : 0 auto;
  background-color : black;
  height           : 100vh;
  padding          : 0;
}
a {
  color           : white;
  text-decoration : none;
}
.listaPrincipal {
  display         : flex;
  text-decoration : none;
  list-style      : none;
  margin          : 0;
  padding         : 10px;
}
.barraDeNavegacao {
  background: red;
}
.bg {
  display         : flex;
  align-items     : center;
  justify-content : center;
  background      : white;
}
li {
  padding: 10px;
}
#itemLista2,#itemLista3,#itemLista4 {
  margin-left: auto;
}
.grid-wrapper {
  display               : grid;
  grid-gap              : 20px;
  grid-template-columns : repeat(auto-fit, minmax(350px, 1fr));
  min-height            : 50vh;
  padding               : 20px;
}
.caixasInformativas {
  display          : flex;
  background-color : violet;
  align-items      : center;
  justify-content  : center;
  min-height       : 50px;
  width            : 100%;
}
footer{
  bottom           : 0;
  width            : 100%;
  background-color : red;
  color            : yellow;
  text-align       : center;
}
#wrapper {
  display            : grid;
  grid-template-rows : auto 50vh 1fr auto;
}

<div id="wrapper">
  <nav class="barraDeNavegacao">
    <ul class="listaPrincipal">
      <li id="itemLista1">
        <a href="">
          Home
        </a>
      </li>
      <li id="itemLista2">
        <a href="cadastro.html">
          Cadastre-se
        </a>
      </li>
      <li id="itemLista3">
        <a href="login.html">
          Login
        </a>
      </li>
      <li id="itemLista4">
        <a href="FAQ.html">
          F.A.Q
        </a>
      </li>
    </ul>
  </nav>
  <div class="bg">
    Nosso Objetivo
  </div>
  <div class="grid-wrapper">
    <div class="caixasInformativas">TESTE</div>
    <div class="caixasInformativas">TESTE</div>
    <div class="caixasInformativas">TESTE</div>
  </div>
  <footer class="rodape">
    All rights reserved - 2021
  </footer>
</div>

要处理断点，请使用 media queries

使网站真正响应的问题

Problems with making website trully responsive

css

grid

flexbox