css 显示：Flex;屏幕尺寸小于480像素到320像素时无法工作

5t7ly7z5  于 2022-11-27  发布在  其他
关注(0)|答案(2)|浏览(158)

有人能帮我吗？我在这卡住了一段时间。我的产品显示卡是不是在灵活的位置时，我设置屏幕的大小宽度在320到480像素。希望任何CSSMaven可以帮助我。我也做了一些不同的屏幕大小@媒体屏幕。但请查看此编码超过宽度480像素，以了解我想要做什么：）我粘贴我的html和CSS代码如下。
所有的图片都在github中，但是css在github respo中只有1到2行。https://github.com/daksh100sharma/new-daddy-s-games-如果你不能看到代码或图片，只需按下我删除的许可证下的代码。

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
     rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous">
    <link rel="stylesheet" href="index.css">

    <title>Home</title>
    <link rel="icon" href="favicon.jpg">
</head>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
 crossorigin="anonymous"></script>

 <script>
  //  $(window).resize(function(){location.reload();});
 //refresh page on browser resize
$(window).bind('resize', function(e)
{
  console.log('window resized..');
  this.location.reload(false); /* false to get page from cache */
  /* true to fetch page from server */
});
 </script>

<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">NEW DADDY'S GAMES</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="index.html">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Accessories</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="graphics-card.html">Graphics card</a>
              </li>
            </ul>
            <span class="navbar-text">
              <!-- Navbar text with an inline element -->
            </span>
          </div>
        </div>
      </nav>
<div class="show-case">
<div class="show-case-1st-line">
    <div class="graphics-card" >
        <h1>Graphics card</h1>
        <img class="img001" src="001.jpg" type="image">
        <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
    </div>
  
 

<div class="gaming-mouse" >
      <h1>GAMING MOUSE</h1>
      <img class="img002" src="002.jpg" type="image">
      <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>

    </div>  
  <div class="gaming-headphone" >

    <h1>GAMING HEADPHONES</h1>
    <img class="img003" src="003.jpg" type="image">
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>

 </div>

 </div>


<div class="show-case-2nd-line">

  <div class="gaming-chair">
    <h1>COMFY CHAIR</h1>
    <img class="img005" src="005.jpg" image>
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
    
  </div>

  <div class="fps-monitor">
    <h1>FPS MONITOR</h1>
    <img class="img006" src="006.jpg" image>
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>
    
  </div>

  <div class="ram" >

    <h1>RAM</h1>
    <img class="img004" src="004.jpg" type="image">
    <button class="graphics-card-btn"><a href="https://google.com">View List</a></button>

    </div>
    
</div>

</div>
<br>
<div class="game-display">
  <img class="img007" src="resorce/home-minecraft.jpg" type="image">
  <button class="img007-btn"><a href="https://google.com">Buy now</a></button>
</div>


<br>
<hr>
    <div class="about-us">
        <h1>About Us</h1>
        <p>We are a new computer accessories store.<br>
           We would love to have great customers like you</p>
    </div>

</body>
</html>

这是我的css，但请不要忘记，我也写了@媒体屏幕的设备宽度320到最大设备宽度480 px

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #732673;
    /* background-image: linear-gradient(to right,#ffffe6 ,#ffe6ff); */
}

hr{
    color: white;
    margin: auto;
}

.show-case{
    text-align: center;
    margin: auto ;
    display: block;
}

.show-case-1st-line{
    display: flex;
    text-align: center;
    margin-top: 10px;
    margin: auto;
}

.graphics-card{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.graphics-card h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img001{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

.graphics-card-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
}

.graphics-card-btn a{
    text-decoration: none;
}

/* /////////      SHOW-CASE [GAMING MOUSE]      /////////    */

.gaming-mouse{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin: auto;
    margin: 0;
    margin-top: 10px;

}

.gaming-mouse h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img002{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

/* .gaming-mouse-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
} */

.gaming-mouse-btn a{
    text-decoration: none;
}


.gaming-headphone{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.gaming-headphone h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img003{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

/* .gaming-headphone-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
} */

/* gaming-headphone-btn a{
    text-decoration: none;
} */



.ram{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.ram h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img004{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

/* .ram-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
}

.ram-btn a{
    text-decoration: none;
} */



.show-case-2nd-line{
    display: flex;
    text-align: center;
    margin-top: 10px;
    margin: auto;
}

.gaming-chair{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.gaming-chair h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img005{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

.gaming-chair-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
}

.gaming-chair-btn a{
    text-decoration: none;
}

.fps-monitor{
    width: 250px;
    height: auto;
    background-color: #bb99ff;
    border-radius: 12px;
    border: 3px ;
    padding: 0;
    padding: 10px;
    text-align: center;
    display: block;
    margin-top: 10px;
}

.fps-monitor h1{
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}

.img006{
    max-width: 95%;
    min-width: 95%;
    height: 110px;
    margin: auto;
    border-radius: 12px;
    display: flex;
    border: 2px #67b581 solid;
}

/* .fps-monitor-btn{
    padding: 5px;
    margin-top: 16px;
    background-color: black;
    color: white;
}

.fps-monitor-btn a{
    text-decoration: none;
} */

.game-display img{
    max-width: 90%;
    display: flex;
    margin: auto;
}

.img007{
    border-radius: 13px;
}

.img007-btn{
    margin: auto;
    display: block;
    margin-top: 10px;
    background-color: green;
}

.img007-btn a{
    color: white;
    text-decoration: none;
    padding: 7px;
}
.about-us{
    position:relative;
    margin:auto;
    border-radius: 13px;  
    max-width: 80%;
    height: auto;
    text-align: center;
    font-size: 3px;
    color:aqua;
    position:static;
}

.about-us h1{
    font-size: 28px;
    text-decoration: underline;
    text-decoration-color: black;
}

.about-us p{
    color:#ff80b3;
    font-size: 17px;

}
    
  
  
/* Smartphones (portrait and landscape) 320 - 480 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    .show-case{
        display: block;
        padding:0;
    }
    /* .show-case-1st-line{
    } */
    .show-case-2nd-line{
        display: flex;
        margin: 0%;
    }
    .graphics-card{
            margin: auto;
            margin-bottom: 10px;
            max-width: 40%;
        }
    .gaming-mouse{
        margin: auto;
        margin-bottom: 10px;
        max-width: 40%;
    }
    .gaming-headphone{
        margin: auto;
        margin-bottom: 10px;
        max-width: 40%;
       
  }
  .ram{
      margin: auto;
      margin-bottom: 10px;
      max-width: 40%;
  }
  .ram h1{
      padding: 12px;
      position: relative;
  }
  .gaming-chair{
      margin: auto;
      margin-bottom: 10px;
      max-width: 40%;
  }
  .fps-monitor{
      margin: auto;
      margin-bottom: 10px;
      max-width: 40%;
    }
    .fps-monitor h1{
        padding: 1px;
        position: relative;
    }   
    .show-case-2nd-line{
        display:flex;
        display: block;
        margin-bottom: 10px;
        padding:0;
  }
}

/* Small phone 245 283 */
@media only screen and (min-device-width : 245px) and (max-device-width : 229px){
    .show-case{
        max-width: 70%;
        display:flex;
        margin: 10px;
    }
    .show-case-2nd-line{
        max-width: 70%;
        display:flex;
        margin: 10px;
    }
    .graphics-card{
        margin-bottom: 10px;
    }
    .gaming-mouse{
        margin-bottom: 10px;
    }
    .gaming-headphone{
        margin-bottom: 10px;
    }
    .ram{
        margin-bottom: 10px;
    }
    .gaming-chair{
        margin-bottom: 10px;
    }
    .fps-monitor{
        margin-bottom: 10px;
    }

}
css

2条答案

按热度按时间
okxuctiv

okxuctiv1#

您在同一个地方使用display：flex和display：block。因此，出现了问题。请删除display：这是一个截图，你可以查看它。Plese check the screenshot

赞(0）分享  回复(0）举报  2022-11-27
xtfmy6hx

xtfmy6hx2#

只是一个额外的观点：为什么不以更聪明的方式直接使用flex的强大功能呢？
使用我在下面留下的解决方案，您将有两个巨大的优势：

  • 您将能够添加/删除类别，而不需要每3个额外的项目创建show-case-1st-line类。
  • 使用您当前的解决方案[即使使用当前标记为答案的校正]，当屏幕宽度下降到大约380 px以下时，每行的元素不再对齐，并且在您的特定情况下，行具有不同的宽度，即，这是宽度为300 px时发生的情况

我的代码背后有几个假设：

  • 我假设您最多需要在同一行显示3个类别[来自您的原始解决方案]
  • 我假设当宽度减少到320px以下时，每行一个项目会更好[以提高UX]
  • 我假设，在大屏幕的情况下，你不想拉伸每行元素的最大数量[3，因为在我的第一个hypp说]，以保持高质量的图片，所以如果屏幕大于750px的元素将停止拉伸

废话少说，这就是JSFiddle
第一个
以下屏幕截图分别显示了480px、420px、240px的布局改进
第三天

赞(0）分享  回复(0）举报  2022-11-27
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com