[因此,我试图复制现有的网站,现在我正要使我的页面具有响应性,当我像现有的网站一样缩小屏幕尺寸时,网格元素将彼此堆叠在一起([C0 ])
我已经尝试创建媒体查询并使用单个网格模板列,但是某些元素似乎仍处于两列网格中。
screenshot of responsive grailed page
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.first {
display: flex;
padding-right: 7rem;
}
.second {
display: flex;
padding-left: 7rem;
justify-content: space-between;
text-decoration: none;
}
.header {
padding-top: 1rem;
padding-bottom: 0.9rem;
width: 100%;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
border-bottom: 0.1rem solid #eeeeee;
}
.logo {
height: 1.4rem;
width: 9rem;
margin-right: 1.5rem;
}
.search {
height: 2.3rem;
width: 29rem;
border: 0.1rem solid black;
}
.navbar {
display: flex;
padding-top: 4.1rem;
align-items: center;
justify-content: center;
border-bottom: 0.1rem solid #eeeeee;
color: black;
}
.header a,
.navbar a {
text-decoration: none;
font-size: 0.8rem;
font-weight: 560;
color: black;
}
.header a:hover,
.navbar a:hover {
color: blue;
}
.second a {
margin-right: 0.8rem;
margin-left: 0.8rem;
}
.navbar a {
margin-right: 1.7rem;
margin-left: 1.7rem;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
.line {
background-color: black;
height: 0.3rem;
width: 2rem;
margin: 0.1rem;
}
.addListing {
display: grid;
align-content: center;
justify-content: center;
align-items: center;
grid-template-columns: 28em 28rem;
margin-top: 2rem;
}
h3 {
grid-column: 1 / 3;
}
.item-name,
.item-size {
grid-column: 2/3;
}
.note {
grid-column: 1/2;
font-size: 0.7rem;
line-height: 2;
}
.addListing select,
.form-input {
height: 2.3rem;
width: 26rem;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.description {
grid-column: 1/3;
height: 9rem;
padding: 1.5rem;
font-size: 0.9rem;
}
.form-start {
justify-self: start;
}
.form-end {
justify-self: end;
}
#payment,
#shipping,
.price {
grid-column: 1/2;
}
#tips,
#ship-tips {
grid-column: 2/3;
justify-self: end;
font-weight: lighter;
}
#tips a,
#ship-tips a {
text-decoration: none;
color: blue;
}
.shipping-desc {
grid-column: 1/3;
font-size: 1rem;
line-height: 1.5;
}
label {
font-weight: 580;
}
.country,
.second-col {
display: flex;
justify-content: flex-end;
padding-bottom: 1rem;
padding-top: 1rem;
width: 26rem;
border-bottom: 0.1rem solid #eeeeee;
/* width: 26rem;
padding-bottom: 1rem;
padding-top: 1rem;
border-bottom: 0.1rem solid #eeeeee; */
}
.second-col {
/* moves second column to the end of the grid */
justify-self: end;
}
.country label,
.second-col label {
margin-right: auto;
align-self: center;
}
input[type="checkbox"] {
width: 2rem;
height: 2rem;
}
/* .country input {
height: 2.3rem;
margin-left: 3rem;
} */
/* .second-col {
display: flex;
justify-content: flex-end;
border-bottom: 0.1rem solid #eeeeee;
padding-bottom: 1rem;
padding-top: 1rem;
} */
.photos-heading {
padding-top: 2rem;
}
.image-upload > input {
display: none;
}
.orig-grid {
grid-column: 1/3;
padding-bottom: 1rem;
}
.images {
display: grid;
justify-items: stretch;
justify-content: stretch;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.pic-one {
grid-column: 1/3;
grid-row: 1/3;
}
.top-row {
justify-self: end;
}
.bottom-row {
align-self: end;
justify-self: right;
}
.publish {
grid-column: 1/3;
height: 4rem;
font-size: 1.5rem;
}
.footer {
display: flex;
padding-top: 2.5rem;
padding-bottom: 1.6rem;
justify-content: flex-end;
}
.footer-links {
display: flex;
margin-right: auto;
font-size: 0.8rem;
align-items: center;
}
.footer-links a,
.footer-socials a,
.footer-socials p {
margin-right: 0.8rem;
margin-left: 0.8rem;
text-decoration: none;
color: black;
}
.footer-socials {
display: flex;
align-items: center;
}
.copyright {
font-size: 0.8rem;
}
@media (max-width: 800px) {
.addListing {
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"heading-one"
"heading-two"
"categories"
"name-item"
"des-select"
"enter-size"
"des-note"
"color"
"des-color"
"condition"
"condition-select"
"desc"
"input-desc"
"payment"
"tips"
"input-price"
"shipping"
"ship-tips"
"ship-desc";
background-color: pink;
}
/* h3,
.item-name,
.item-size,
.note,
select,
.form-input,
.description,
#payment,
#shipping,
.price,
#tips,
#ship-tips,
.shipping-desc,
.country,
.publish {
grid-column: auto;
grid-row: auto;
} */
}
我认为您应该将布局“分解”成碎片才能完成这项工作。您应该有一个父包装器,该包装器可以决定在哪个方向上显示其子级;如果屏幕较大,则应在行中显示;如果屏幕缩小了,则应在列中进行显示。