使div宽度在特定屏幕宽度时响应

Question

好的，对于学校作业，我必须使这些块响应并在特定屏幕宽度上改变行，高于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>

Answer 1

您可以尝试使用动态calculatedmax-width代替静态300pxwidth。

@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>

Answer 2

当宽度为660px时，可以使用另一个@media设置宽度为百分比:

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;
}
}

我将letter的比例改为vw，因为它是响应的，允许它们在任何小屏幕上保持正方形

我还改变了blokken的高度，使字母始终保持紧凑，将单位设置为vw，在660px宽屏幕下