CSS的响应性答案

【问题标题】：Responsiveness for CSSCSS的响应性
【发布时间】：2020-07-11 10:43:27
【问题描述】：

大家好，我已经有一段时间没有进行 Web 开发了。我使用 flexbox 使我的网站成为我认为的响应式网站。

也是第一次在这里发帖。如果这是大量信息，请告诉我获得帮助的常规方法是什么。

我总共有两页。一个主页和一个展示我所有作品的画廊。

一些 HTML 元素（视频）有一个附加到语义的库以摆脱 javascript。在这种情况下，我使用的是 AOS（滚动动画）。

无论如何，我让第一页（主页）响应 iphoneX，但我无法让画廊页面以任何方式、形状或形式响应，这让我发疯。

我知道可能有很多错误和更简单的方法来做事。

除了画廊页面的响应能力之外 - 请分享一些关于我可以如何改变一些事情的提示。

如果您对我的问题感到困惑。只需帮助 PLEASE 和 iPhone X 和 iPad 的图库页面的响应能力。

谢谢！

HTML图库部分

<div class="gallery-section">
  <h1>GALLERY</h1>
  <h2>Harlem Globetrotters</h2>
  <div class="feature-story">
    <div class="main-story">
      <video src="./resources/videos/Harlem Globetrotters - Rube Goldberg Daily Planet.mp4" controls
        poster="./resources/images/globtrottersRubegoldberg.png"></video>
    </div>
  </div>

  <!--MOVIE 1-->
  <div class="feature-stories">
    <div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
      <video src="./resources/videos/John Farnworth - Mt. Everest - Daily Planet.mp4" controls
        poster="./resources/images/John-Farnworth.jpg"></video>
      <div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
        <div class="movie-text-header">Mt.Everest</div>
        TEXT ---
      </div>
    </div>
  </div>

  <!--MOVIE2-->
  <div class="feature-stories">
    <div class="movie-2" data-aos="fade-left" data-aos-duration="3000">
      <div class="movie1-text" data-aos="fade-right" data-aos-duration="3000">
        <div class="movie-text-header">Manits wears 3D-Glasses</div>
        TEXT ---
      </div>
      <video src="./resources/videos/Praying Mantis Stereovision - Daily Planet.mp4" controls
        poster="./resources/images/mantis3d.jpg"></video>
    </div>
  </div>

  <!--MOVIE3-->
  <div class="feature-stories">
    <div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
      <video src="./resources/videos/Dyson Orchestra - Daily Planet.mp4" controls
        poster="./resources/images/dysonorchestra.jpg"></video>
      <div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
        <div class="movie-text-header">Dyson Orchestra</div>
        TEXT---
      </div>
    </div>
  </div>

  <!--MOVIE4-->
  <div class="feature-stories">
    <div class="movie-2" data-aos="fade-left" data-aos-duration="3000">
      <div class="movie1-text" data-aos="fade-right" data-aos-duration="3000">
        <div class="movie-text-header">Twilight zone discovered</div>
        TEXT ---
      </div>
      <video src="./resources/videos/Rariphotic Zone Discovery Smithsonian - Daily Planet.mp4" controls
        poster="./resources/images/TwilightZone.jpg"></video>
    </div>
  </div>

  <!--MOVIE5-->
  <div class="feature-stories">
    <div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
      <video src="./resources/videos/Little Tikes - Flite Test - Daily Planet.mp4" controls
        poster="./resources/images/littletikes.png"></video>
      <div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
        <div class="movie-text-header">Little Tikes car flies</div>
        TEXT ---
      </div>
    </div>
  </div>

  <!--MOVIE6-->
  <div class="feature-stories">
    <div class="movie-2" data-aos="fade-left" data-aos-duration="3000">
      <div class="movie1-text" data-aos="fade-right" data-aos-duration="3000">
        <div class="movie-text-header">Stephen Hawking - Life in numbers</div>
        TEXT ---
      </div>
      <video src="./resources/videos/Stephen Hawking Life in Numbers - Daily Planet.mp4" controls
        poster="./resources/images/shawking.jpg"></video>
    </div>
  </div>

  <!--MOVIE7-->
  <div class="feature-stories">
    <div class="movie-1" data-aos="fade-right" data-aos-duration="3000">
      <video src="./resources/videos/ESA CLUSTER UFO - Daily Planet.mp4" controls
        poster="./resources/images/ESAcluster.jpg"></video>
      <div class="movie1-text" data-aos="fade-left" data-aos-duration="3000">
        <div class="movie-text-header">Was it a UFO?</div>
        TEXT--
      </div>
    </div>
  </div>
</div>

<div class="top10">
  <div class="top10-header">
    <h1>TOP 10's</h1>
  </div>
  <div class="top10-videos">
    <div class="first-two">
      <div class="top10-1"><video src="./resources/videos/Top 10 - Things astronauts do in space.mp4" controls
          poster="./resources/images/astroSpinner.jpg"></video>
      </div>
      <div class="top10-1"><video src="./resources/videos/Top 10 - World's Biggest Displays - Daily Planet.mp4"
          controls></video></div>
    </div>
    <div class="second-two">
      <div class="top10-1"><video src="./resources/videos/Top 10 - Extreme Adventures - Daily Planet.mp4"
          controls></video></div>
      <div class="top10-1"><video src="./resources/videos/Top 10 - Holograms - Daily Planet.mp4" controls></video>
      </div>
    </div>
    <div class="third-two">
      <div class="top10-1"><video src="./resources/videos/Top 10 - High Tech Sneakers - Daily Planet.mp4"
          controls></video></div>
      <div class="top10-1"><video src="./resources/videos/Top 10 - Robots that play sports - Daily Planet.mp4"
          controls></video></div>
    </div>
  </div>
</div>

媒体查询 CSS

@media only screen and (min-width: 375px) and (max-width: 812px) {
  html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
  }

  .nav-wrapper {
    display: flex;
    justify-content: center;
  }

  .nav-wrapper > .left-side > div > a {
    padding: 100px;
    text-decoration: none;
    border: none;
  }

  .container .right-side {
    display: none;
  }

  header .content {
    height: 10%;
  }

  .section-2 {
    padding: 40px;
    height: 45rem;
    overflow: hidden;
  }

  .section-2 .headline {
    font-size: 4rem;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }

  .section-2-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 1450px;
    margin-left: -170px;
    padding: 0px 150px;
  }

  .section-2-content img {
    display: none;
  }

  .links {
    margin-bottom: 220px;
    flex: 1;
  }

  .links a {
    margin: -30px;
  }

  .footer-bottom {
    display: none;
  }

  .about {
    display: none;
  }

  .footer .footer-content {
    display: flex;
    flex-direction: column;
  }

  #contactForm {
    margin-top: 25px;
  }

  .gallery-section h1 {
    margin-left: -100px;
  }

  .gallery-section h2 {
    font-size: 2rem;
    margin-right: 1rem;
  }

  .gallery-section .feature-story {
    height: 30vh;
    margin-right: 70px;
  }

  .gallery-section {
    width: 375px;
    display: flex;
    flex-direction: column;
    margin: auto;
  }

  .gallery-section video {
    padding: 0rem;
    margin-top: 0rem;
    width: 100%;
  }

  .movie-1 {
    margin-left: -100px;
  }

  .movie1-text {
    display: none;
  }

  .movie2-text {
    display: none;
  }

  .top10 {
    display: none;
  }

  .alert {
    display: none;
  }
}

【问题讨论】：

嘿，你想让它看起来怎么样？当我将此代码放入codesandbox时，您的某些视频似乎较大而有些较小，这是您的问题吗？在移动设备上，您是否希望所有视频都 100% 显示在屏幕上？可能左右有一点边距？
嗨！非常感谢你的回复。真的很感激。我希望它们都适合屏幕，并带有较小的填充/边距。最好，'.feature-stories' 部分是一列，这就是现在的样子（但两端都有很多间距） - 以及两行三个视频中的 '.top10' 部分（就像它如何在普通桌面上看起来）。谢谢！

标签： javascript html css web flexbox

【解决方案1】：

在头部你有类似的东西：

<meta name="viewport" content="width=device-width, initial-scale=1">?

这里是更多信息的链接 https://www.w3schools.com/css/css_rwd_viewport.asp

【讨论】：

【解决方案2】：

对于响应性问题，我认为这个视频可能会解决它： https://www.youtube.com/watch?v=bam83Xv4VMA 它将展示如何在没有媒体查询的情况下完成。

【讨论】：