在特定屏幕宽度时使DIV宽度响应迅速

发布于 2025-01-31 21:17:06 字数 1299 浏览 2 评论 0原文

好的，因此，对于学校作业，我必须使这些块在特定屏幕宽度上响应和变化，而在1024px以上，它们必须是2行，并且低于1024px 2行垂直行驶，始终拼写“ LOI”。现在，当660px时，这些块变小，它们掉出屏幕。当屏幕宽度为660px时，有没有办法使它们逐渐变小？提前致谢！

main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

<main>
  <h2 id="letterblokjes">Letterblokjes</h2>
  <div class="blokken">
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
  </div>
</main>

原文

Okay so, for a school assignment I have to make these blocks responsive and changing rows when on a certain screen width, above 1024px they have to be 2 rows going horizontally, and below 1024px 2 rows going vertically, always spelling out 'LOI'. Now when at 660px, the blocks dont get smaller, they fall out of the screen. Is there a way to make them gradually get smaller when the screen width is at say 660px? Thanks in advance!

main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

<main>
  <h2 id="letterblokjes">Letterblokjes</h2>
  <div class="blokken">
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
  </div>
</main>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鞋纸虽美，但不合脚ㄋ〞 2025-02-07 21:17:06

您可以尝试使用动态计算 最大宽度而不是静态300px width。

@media only screen and (max-width: 800px) {
   .letter {
    max-width: calc(100%/2 - 10px); /* -10 px accounts for margin: 5px; */
   }
}

在这里看到它：

main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
   .letter {
    max-width: calc(100%/2 - 10px); /* -10 px accounts for margin: 5px; */
   }
}

<main>
  <h2 id="letterblokjes">Letterblokjes</h2>
  <div class="blokken">
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
  </div>
</main>

You can try using a dynamic calculated max-width instead of a static 300px width.

@media only screen and (max-width: 800px) {
   .letter {
    max-width: calc(100%/2 - 10px); /* -10 px accounts for margin: 5px; */
   }
}

See it working here:

main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
   .letter {
    max-width: calc(100%/2 - 10px); /* -10 px accounts for margin: 5px; */
   }
}

<main>
  <h2 id="letterblokjes">Letterblokjes</h2>
  <div class="blokken">
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
  </div>
</main>

回复收藏 0 原文

三生殊途 2025-02-07 21:17:06

您可以使用另一个@Media将您的宽度设置为660px时的百分比：

    main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

@media screen and (max-width: 660px){
    
  .letter{
      width : 48%;
  }
}

编辑：
现在，您的块是正方形的，随着空间的较小而变小，

 main {
  max-width: 1024px;
  margin : auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height:1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 100px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}


@media screen and (max-width: 660px){
    .blokken{
        height : 160vw;
    }
  .letter{
      width : 40vw;
      height : 40vw;
  }
}

我更改了字母与vw相称的，因为它的响应能力很快，允许它们在任何小屏幕上保持正方形，

我也更改了高度blokken为信件始终通过将单元放入vw在660px宽屏幕上，请始终保持包装。

You can use another @media to set your width to a percentage when you're at 660px:

    main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

@media screen and (max-width: 660px){
    
  .letter{
      width : 48%;
  }
}

EDIT :
now your blocks are square and getting smaller with less space

 main {
  max-width: 1024px;
  margin : auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height:1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 100px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}


@media screen and (max-width: 660px){
    .blokken{
        height : 160vw;
    }
  .letter{
      width : 40vw;
      height : 40vw;
  }
}

I changed the letter proportion to vw as it's responsive, allowing them to stay square on any small screen

I also changed the height of blokken for the letter to always stay packed by putting the unit to vw on under 660px wide screen

回复收藏 0 原文

~没有更多了~