使 divs 全屏和用户向下滚动以查看其他内容的响应式网站

Question

你好，我想让我的网站 responsive.I 在 4 div 秒内拥有 divide 正文。每 2 div 秒有 100% 的屏幕，另外两个有 margin-top : 50%;。现在我希望每次 max-width = 800px，我希望每个 div 都具有全屏，并且用户向下滚动以查看其他 div。如果你想看我的网站是https://frontjim.github.io。提前谢谢，对不起我的英语不好。我用过这个但是没用

@media screen and (max-width: 800px) {
  body,
  html {
    margin: 0;
    padding: 0;
    height: 100%;
    max-height: 100vh;
    display: flex;
    flex-direction: row;
    flex: 1 1 auto;
    min-height: 0;
  }
}

.back {
  display: flex;
  flex-direction: column;
}


.navbar {
  width: 100vw;
  height: 100vh;
  
}
.mater {
  width: 100vw;
  height: 100vh;
  
}
.cb {
  width: 100vw;
  height: 100vh;
}
.scroll {
  width: 100vw;
  height: 100vh;
  
}

Answer 1

使用CSS网格，轻松搞定

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Responsive Grid</title>
  </head>
  <body>
    <div class="main">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <div class="div4"></div>
    </div>
  </body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
}
.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh 100vh;
}
.div1 {
  background-color: lightgreen;
}
.div2 {
  background-color: lightseagreen;
}
.div3 {
  background-color: coral;
}
.div4 {
  background-color: lightblue;
}

@media screen and (max-width: 800px) {
  .main {
    grid-template-columns: 1fr;
    grid-template-rows: 100vh 100vh 100vh 100vh;
  }
}

实时取景：https://codepen.io/zgheibali/pen/ZEWWVvr

希望我的回答对您有所帮助:)

Answer 2

像这样更改 design.use：

在 html::

<div class='flexyy'>
  <div class='div1'>....</div>
  <div class='div2'>....</div>
  <div class='div3'>....</div>
  <div class='div4'>....</div>
</div>

在 css::

div1{
  width:100%;
}
div2{
  width:100%;
}
div3{
  width:100%;
}
div4{
  width:100%;
}

@media(min-width:800px){
  .div1,.div2,.div3,.div4{
    width:auto;
  }
  .flexyy{
    display:flex;
    flex-direction:row;
    flex: 0.5 1 auto; 
    flex-wrap:wrap;
  }
}

Answer 3

您可以拥有一个包含 child 个元素的通用容器。此容器有 width: 100vw 和 height: 100vh，以及 display: flex。您不需要添加 flex-direction: row，因为它是默认值。

child人会有width: 100%.

片段：

* {
  margin: 0;
  padding: 0;
}

.flex {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.div1 {
  background-color: red;
  width: 100%;
}

.div2 {
  background-color: blue;
   width: 100%;
}

.div3 {
  background-color: green;
   width: 100%;
}

.div4 {
  background-color: grey;
   width: 100%;
}

<div class="flex">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

<div class="flex">
  <div class="div3"></div>
  <div class="div4"></div>
</div>

使 divs 全屏和用户向下滚动以查看其他内容的响应式网站

Responsive Website that makes divs fullscreen and user scroll down to see others

css

responsive

片段：