我有一行 3 列。
当我调整页面大小时，我希望元素保持其宽度，但如果任何元素无法适应调整后的屏幕尺寸，那么我希望它下降到下一行。
我正在尝试使用 css 网格执行此操作。
JSBin 链接
我的造型如下
.wrapper {
display: grid;
grid-template-columns: 20% 30% 40%;
grid-gap: 1em;
}
正如 JTS 所提到的，您需要使用媒体查询。
@media screen and (max-width:900px) {
.wrapper {
display: grid;
grid-template-columns: 50% 50%;
grid-gap: 1em;
}
}
@media screen and (max-width:576px) {
.wrapper {
display: grid;
grid-template-columns: 100%;
grid-gap: 1em;
}
}
您可以检查引导程序的标准断点并基于该断点创建自己的断点 https://getbootstrap.com/docs/4.0/layout/overview/
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
您可以查看更新的 JS Bin 代码
https://jsbin.com/bulaqigexi/1/edit?html,output
我曾经遇到过这个问题 theelectronichandbook.tech 这是我使用的。@media语句可能因投影视口而异(即。苹果手机X，IPod触摸2G，8k 120"电视等(
如果这太令人困惑，这里有一个更适合我基于提供的 JSbin 制作的工作的代码。
.wrapper>div:nth-child(1) {
width:4em;
}
.wrapper>div:nth-child(2) {
width:8em;
}
.wrapper>div:nth-child(3) {
width:16em;
}
.wrapper>div:nth-child(4) {
width:32em;
}
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper>div {
background: #eee;
padding: 1em;
}
.wrapper>div:nth-child(odd) {
background: #ddd;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>What is this story?</title>
</head>
<body>
<div class="wrapper">
<div>
<h1>1</h1>
F******t w***n love Eminem. "Chicka, chicka, chicka, S**m S***y, I'm sick of him. Look at him, walkin' around, g******' his y**-****-***t. F*****n' the y**-****-**o," "Yeah, but he's so cute though.". Yeah, I probably got a couple of s****s up in my head loose. But no worse than what's goin' on in your parents' bedrooms.
</div>
<div>
<h1>2</h1>
Will the real S**m S***y please stand up?. I repeat, will the real S**m S***y please stand up?. We're gonna have a problem here. Y'all act like you never seen a w**** ****** before. Jaws all on the floor like P** like T**** just burst in the door. And started whoopin' her a** worse than before.
</div>
<div>
<h1>3</h1>
I'm S**m S***y, yes, I'm the real S***y. All you other S**m S****s are just imitating. So won't the real S**m S****s please stand up. Please stand up, please stand up?. 'Cause I'm Slim Shady, yes, I'm the real S***y. All you other S**m S****s are just imitating. So won't the real S**m S***y please stand up. Please stand up, please stand up?
</div>
<div>
<h1>4</h1>
My tea's gone cold. I'm wondering why I got out of bed at all. The morning rain clouds up my window. And I can't see at all. And even if I could it'd all be gray. But your picture on my wall. It reminds me that it's not so bad, it's not so bad.
</div>
</div>
</body>
</html>