为什么当我展开浏览器时我的网站没有响应

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

下面我附上了我的 CSS 外观，我的网页是音频播放器、嵌入式 Twitter 链接和一些视频的混合体。当我在 iPhone 上打开网页时，项目显示居中，但当我水平翻转手机时，我希望项目响应为两列，而不是页面右侧空间量不均匀的单列。我还希望我的网页在 ipad 或 macbook 上打开时能够做出响应，最大列数为三，当浏览器开始缩小时，网页会响应单列，同时保持居中，请帮助我

* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
 
      }
  
      html, body {
      width: 100%;
      overflow-x: hidden;
      margin: 0;
      padding: 0;
      }

      body {
      background-color: white;
      justify-content: center;
      display: flex;
      justify-content: center;

      }

      .header {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 35px 5%;
      font-family: 'Luxurious Script', cursive;
      font-size: 15px;
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      z-index: 99;
      background-color: white; }

     .container-wrapper {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      }

      .grid {
      display: grid;
      justify-content: center;
      align-items: center;
      gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      text-align: center;
      width: 100%;
      max-width: 1200px;
      padding: 20px;
      margin: 20px;
      }

    .grid-item {

    width: 100%;
    max-width: 300px;
    height: 320px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px;
    }

   .grid-item video,
   .grid-item .container {
    width: 100%;
    height: 100%;
    max-width: 300px;
    }

   .container {
   width: 100%;
   height: 300px;
   background-color: white;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   padding: 50px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   transition: all 0.5s ease;
   }

   .container:hover{
   box-shadow: 0 10px 20px rgb(0, 0, 0, 0.4);
   }

   h2 {
  font-size: 20px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
   }
 
   h3 {
  font-size: 20px;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
   }

   .player-progress {
    background-color: lightgray;
    border-radius: 5px;
    cursor: pointer;
    margin: 40px 20px 35px;
    height: 6px;
    width: 95%;
    }

   .progress{
    background-color: black;
    border-radius: 5px;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
    }

   .music-duration{
   position: relative;
   top: -25px;
   display: flex;
   justify-content: center;
   align-items: center;
   letter-spacing: 2px;
   font-family: "Abel", sans-serif;
   font-size: small;
   }

   .music-duration span {
    margin: 0 10px;
    }

   .player-controls{
   display: flex;
   justify-content: center;
   top: -15px;
   left: 120px;
   width: 200px;
   }

   .bx {
   font-size: 30px;
   color: darkgrey;
   cursor: pointer;
   user-select: none;
   transition: all 0.3 ease;
   }

   .bx:hover{
   filter: brightness(40%)
   }

   audio-player {
   width: calc(100% - 40px) ;
   box-sizing: border-box;
   }

   video{
   border-radius: 20px;
   overflow: hidden;
   }
  
   @media (max-width: 1200px) {
        .container-wrapper {
          padding: 0 20px;
        }
      }

    @media (max-width: 599px) {
    .grid-item {
       margin: 10px 0;
     }
    }
<body>

    <div class="container-wrapper">

    <div class="header">
    <h1>Cant Die Yet</h1>
    </div>
   

    <div class="grid">
    
    <div class="grid-item">

      <div class="container">

      <h2 id="music-title"></h2>
      <h3 id="artist-title"></h3>

      <div class="player-progress" id="player-progress">
        <div class="progress" id="progress"></div>
        <div class="music-duration">
            <span id="current-time">0:00</span>
            <span id="duration">0:00</span>
          </div>
        </div>

        <div class="player-controls">

          <i class='bx bx-rewind' title="Previous" id="prev"></i>
          <i class='bx bx-play' title="Play" id="play"></i>
          <i class='bx bx-fast-forward' title="Next" id="next"></i>

      </div>

    </div>

    </div>
    
    <div class="grid-item">

        <video autoplay loop muted playsinline width="400" height="420"> 
        <source src="video/C2.mp4" type="video/mp4">
        </video>   

        </div>

    <div class="grid-item">

        <video autoplay loop muted playsinline width="400" height="420"> 
        <source src="video/CASHA MAIN2.mp4" type="video/mp4">
        </video>   
    
        </div>
    
    
    <div class="grid-item">

        <video autoplay loop muted playsinline width="400" height="420"> 
        <source src="video/VANESSA1.mp4" type="video/mp4">
        </video>   
          
        </div>
            
    <div class="grid-item">

      <a class="twitter-timeline" 
      data-width="350" data-height="300" 
      href="https://twitter.com/cashbreed?ref_src=twsrc%5Etfw"></a> 
      <script async src="https://platform.twitter.com/widgets.js" 
      charset="utf-8"></script>
       
    </div>  
    
    </div>

    </div>

    </div>
    
    <script src="index.js"></script>

</body>
</html>

我尝试过调整边距和所有内容，但它要么只是在手机上查看时将我的项目推离屏幕，而其他似乎都不起作用或对响应能力产生影响

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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 35px 5%;
    font-family: 'Luxurious Script', cursive;
    font-size: 15px;
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: white;
}

.container-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    justify-items: center;
}

.grid-item {
    width: 100%;
    max-width: 300px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-item video,
.grid-item .container {
    width: 100%;
    height: 100%;
    max-width: 300px;
}

.container {
    width: 100%;
    height: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
}

.container:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

h2 {
    font-size: 20px;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
}

h3 {
    font-size: 20px;
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-weight: 100;
}

.player-progress {
    background-color: lightgray;
    border-radius: 5px;
    cursor: pointer;
    margin: 40px 20px 35px;
    height: 6px;
    width: 95%;
}

.progress {
    background-color: black;
    border-radius: 5px;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
}

.music-duration {
    position: relative;
    top: -25px;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2px;
    font-family: "Abel", sans-serif;
    font-size: small;
}

.music-duration span {
    margin: 0 10px;
}

.player-controls {
    display: flex;
    justify-content: center;
    top: -15px;
    width: 200px;
}

.bx {
    font-size: 30px;
    color: darkgrey;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.bx:hover {
    filter: brightness(40%);
}

audio-player {
    width: calc(100% - 40px);
    box-sizing: border-box;
}

video {
    border-radius: 20px;
    overflow: hidden;
}

@media (max-width: 599px) {
    .grid {
        grid-template-columns: 1fr;
    }
    .grid-item {
        margin: 10px 0;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
<body>

    <div class="container-wrapper">

    <div class="header">
    <h1>Cant Die Yet</h1>
    </div>
   

    <div class="grid">
    
    <div class="grid-item">

      <div class="container">

      <h2 id="music-title"></h2>
      <h3 id="artist-title"></h3>

      <div class="player-progress" id="player-progress">
        <div class="progress" id="progress"></div>
        <div class="music-duration">
            <span id="current-time">0:00</span>
            <span id="duration">0:00</span>
          </div>
        </div>

        <div class="player-controls">

          <i class='bx bx-rewind' title="Previous" id="prev"></i>
          <i class='bx bx-play' title="Play" id="play"></i>
          <i class='bx bx-fast-forward' title="Next" id="next"></i>

      </div>

    </div>

    </div>
    
    <div class="grid-item">

        <video autoplay loop muted playsinline width="400" height="420"> 
        <source src="video/C2.mp4" type="video/mp4">
        </video>   

        </div>

    <div class="grid-item">

        <video autoplay loop muted playsinline width="400" height="420"> 
        <source src="video/CASHA MAIN2.mp4" type="video/mp4">
        </video>   
    
        </div>
    
    
    <div class="grid-item">

        <video autoplay loop muted playsinline width="400" height="420"> 
        <source src="video/VANESSA1.mp4" type="video/mp4">
        </video>   
          
        </div>
            
    <div class="grid-item">

      <a class="twitter-timeline" 
      data-width="350" data-height="300" 
      href="https://twitter.com/cashbreed?ref_src=twsrc%5Etfw"></a> 
      <script async src="https://platform.twitter.com/widgets.js" 
      charset="utf-8"></script>
       
    </div>  
    
    </div>

    </div>

    </div>
    
    <script src="index.js"></script>

</body>
</html>

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