文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS的响应性

问CSS的响应性
EN

Stack Overflow用户

提问于 2020-03-30 23:25:02

回答 1查看 99关注 0票数 2

嘿，伙计们，我已经有一段时间没做过网页开发了。我已经使我的网站，我认为是响应使用柔性盒。

也是第一次在这里发帖。如果这是大量的信息，请告诉我传统的寻求帮助的方法是什么。

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

有些HTML元素(视频)有一个附加在语义上的库，以摆脱javascript。在本例中，我使用的是AOS (滚动动画)。

无论如何，我做了第一页(主页)响应iphoneX，但我不能让画廊页面以任何方式，形状或形式，它正使我疯狂。

我知道可能有很多错误和更容易的方法来做事情。

除了响应的画廊页面-请分享技巧，我如何可以改变一些事情。

如果你对我的要求感到困惑的话。只需帮助，请与画廊页面的响应性，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;
  }
}

javascript

html

css

web

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-30 23:38:50

在头部部分，你是否有这样的东西：

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

以下是进一步信息https://www.w3schools.com/css/css_rwd_viewport.asp的链接

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60941137

复制

相似问题

问CSS的响应性
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS的响应性EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS的响应性
EN