当我尝试媒体查询、Flex 和网格时,我遇到了两个问题。
溢出问题 我在堆栈溢出中搜索相关问题,但没有解决我的问题。当我通过将显示更改为块或减少列来使每个
class =year
部分堆叠在一起时。它不会将下面的内容推到下方,而是仅出现在下一部分的后面。然而,对于投资组合部分,它不存在任何溢出问题。每次媒体查询时,我都必须调整年份部分的边距。有没有更简单的方法来解决这个问题?
媒体查询问题 实验部分再次发生这种情况。当它处于监视器/3800px 大小时,我将 .timeline 宽度更改为 70%。在我这样做之后,当我在屏幕为 2800px 时将 .timeline 宽度更改为 90% 时,它没有改变(参见图 1)。我认为后者应该取代前者?但是,如果我在 3800px 处什么都不做(.year 展开,参见图 4),并且我将 .timeline 2800px 宽度更改为 90%,它就可以工作(参见图 3)。
我还意识到媒体查询的放置很重要。如果我更改下面的部分,如果我在 3800px 之后写 2800px,则会发生相反的情况。这是怎么回事?我该如何解决这个问题?
理想情况下,我希望它在显示器尺寸时看起来像图 2,在 macpro 尺寸时看起来像图 3。
/*experience*/
.experience {
height: 100vh;
}
.timeline img {
height: 50px;
}
.timeline {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
margin: auto;
}
.year {
display: flex;
flex-direction: column;
align-items: center;
}
.date {
text-align: center;
font-size: 50px;
color: white;
width: 280px;
font-family: "Montserrat", sans-serif;
}
.time-content {
margin-top: 400px;
width: 250px;
padding: 20px;
border-radius: 25px;
font-family: "Montserrat", sans-serif;
}
.date::after {
content: '';
position: absolute;
width: 6px;
height: 100%;
margin-top: 60px;
margin-left: -50px;
height: 400px;
z-index: -1;
}
.year:nth-child(even) .date::after {
height: 100px;
}
.year:nth-child(even) .time-content {
margin-top: 100px;
}
.orange,
.orange::after {
background: rgba(247, 138, 55, 255);
}
.green,
.green::after {
background: #82a443;
}
.pink,
.pink::after {
background: #e5567f;
}
.lightblue,
.lightblue::after {
background: #43c3d0;
}
.yellow,
.yellow::after {
background: #e9c43b;
}
/*portfolio*/
.portfolio {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 20px;
}
.pimg {
display: flex;
justify-content: center;
}
.section {
border-radius: 25px;
background-color: #e5eefa;
font-family: "Montserrat", sans-serif;
}
.subtitle {
background-color: white;
border-radius: 15px;
padding: 15px;
margin: 30px;
}
.section img {
border-radius: 25px;
}
.innerimg {
background-color: #d4e1f1;
padding: 20px;
border-radius: 20px;
margin: 30px;
}
.boxdecor {
background-color: #dfeaf9;
margin-bottom: 20px;
height: 70px;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.section h3 {
margin-top: 0;
font-family: "Montserrat", sans-serif;
padding-top: 20px;
padding-left: 30px;
font-size: 30px;
color: black;
letter-spacing: 3px;
}
.section a {
text-decoration: none;
color: black;
}
a:hover {
opacity: 0.5;
}
/* ***** media queries ****** */
@media (max-width: 800px) {
.timeline {
display: block;
}
.year .date {
width: 90%;
}
.year .time-content {
width: 90%;
}
.year {
margin-top: 100px;
}
.experience {
padding-bottom: 1200px;
}
}
/*Small Screens, Ipads*/
@media (max-width: 1024px) {
/*nav*/
.ownnav ul {
justify-content: center;
gap: 30px;
}
/*introduction section*/
.intro {
display: block;
}
.intro h2 {
margin-left: 10px;
}
.intro h1 {
margin-top: 60px;
margin-right: 100px;
}
.intro .img img {
height: 300px;
}
/*experience*/
.timeline {
grid-template-columns: 1fr 1fr 1fr;
}
.experience {
margin-bottom: 800px;
}
.portfolio {
display: block;
}
.year:nth-child(odd) .date::after {
height: 100px;
}
.year:nth-child(odd) .time-content {
margin-top: 100px;
}
.pimg {
margin-top: 50px;
}
/*contact me section*/
.contact {
display: block;
}
.contact .pheader {
font-size: 50px;
margin-right: 100px;
}
.contact h3 {
margin-right: 50px;
}
}
/*Macbook Pro */
@media (max-width: 2800px) {
/*introduction section*/
.intro h1 {
font-size: 80px;
}
.intro h1 img {
height: 100px;
}
.intro h2 {
font-size: 30px;
}
/*timeline section*/
.timeline {
width: 90%;
}
.date {
width: 250px;
}
.time-content {
width: 200px;
margin-top: 250px;
font-size: 15px;
}
.date::after {
content: '';
position: absolute;
margin-top: 60px;
margin-left: -50px;
height: 300px;
}
.year:nth-child(even) .date::after {
height: 100px;
}
.year:nth-child(even) .time-content {
margin-top: 100px;
}
.date {
text-align: center;
}
/* portfolio section */
#portfolio {
margin-top: 150px;
}
}
/*monitor*/
@media (max-width: 3800px) {
.timeline {
width: 70%;
}
}
<div class="experience">
<h2 class="pheader">Experience</h2>
<div class="timeline">
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date orange">2017</div>
<div class="time-content orange">
<h3>Title</h3>
<p> some text
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/school.png" alt="school"></div>
<div class="date green">2020</div>
<div class="time-content green">
<h3>Title</h3>
<p>Some Text
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/work.png" alt="briefcase"></div>
<div class="date pink">2022</div>
<div class="time-content pink">
<h3>Titel</h3>
<p>Some text
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/question.png" alt="question mark"></div>
<div class="date lightblue">2023</div>
<div class="time-content lightblue">
<h3>Title</h3>
<p>
some text
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/labtop.png" alt="laptop"></div>
<div class="date yellow">2024</div>
<div class="time-content yellow">
<h3>Title</h3>
<p>Some Text
</p>
</div>
</div>
</div>
</div>
<h2 class="pheader" id="portfolio">Portfolio</h2>
<div class="portfolio">
<div class="pimg">
<div class="section">
<a href="../Mini Projects/7.3 CSS Flag Project/index.html" target="_blank">
<div class="boxdecor">
<h3>Flag of Laos</h3>
</div>
<div class="innerimg"><img src="img/flag.png" alt="flag of laos" height="400px" width="500px"></div>
<p class="subtitle">Used relative and absolute position to create a Flag of Laos</p>
</a>
</div>
</div>
<div class="pimg">
<div class="section">
<a href="../Mini Projects/10.3 Mondrian Project/index.html" target="_blank">
<div class="boxdecor">
<h3>Mondrian Painting</h3>
</div>
<div class="innerimg"><img src="img/painting.png" alt="mondrian project" height="400px" width="500px"></div>
<p class="subtitle">Used grid responsive design to create a Mondrian Painting</p>
</a>
</div>
</div>
<div class="pimg">
<div class="section">
<a href="../Mini Projects/9.4 Flexbox Pricing Table Project/index.html" target="_blank">
<div class="boxdecor">
<h3>Pricing Table</h3>
</div>
<div class="innerimg"><img src="img/pricingtable.png" alt="pricing table" height="400px" width="500px"></div>
<p class="subtitle">Used Flexbox responsive design to create a Pricing Table </p>
</a>
</div>
</div>
<div class="pimg">
<div class="section">
<a href="../Mini Projects/11.3 TinDog Project/index.html" target="_blank">
<div class="boxdecor">
<h3>Dog Tinder</h3>
</div>
<div class="innerimg"><img src="img/tinydog.png" alt="dog" height="400px" width="500px"></div>
<p class="subtitle">Used Bootstrap to create a website about Dog Tinder</p>
</a>
</div>
</div>
</div>
flex
和 flex-wrap
可以避免一些媒体查询,那么网格对于 cards 布局很有用:)。
mediaquerie 也可以减少。
这里有一个例子可以激励您,直到出现更多答案。
.timeline {
display:flex;
flex-wrap:wrap;
gap : 2vw;
justify-content:center;
}
.year {
display:grid;
width:clamp( 280px, 16vw, 400px);
grid-template-rows: auto auto clamp(50px, 30vmin, 150px) 1fr;
}
.year:nth-child(even) {
grid-template-rows: auto auto clamp(30px, 10vmin, 100px) 1fr;
}
.year::before {
content:'';
padding:2px;
margin:auto;
grid-row:3;
display:block;
height:100%;
}
.time-graphic {
margin:auto;
grid-row:1
}
.date {
grid-row:2;
font-size:clamp(26px,4vw ,40px);
color:white;
padding:0 1rem;
/*margin:auto; instead next rule ?*/
text-align:center;
border-radius:5px;
}
.time-content {
grid-row:4;
border-radius:5px;
padding:1em;
margin-bottom:auto;
}
@media (max-width:650px){
.year {
grid-template-rows: auto auto 50px 1fr;
}
.time-content {
margin-bottom:0;
}
}
.orange,
.orange::after ,
.year:nth-child(1)::before {
background: rgba(247, 138, 55, 255);
}
.green,
.green::after,
.year:nth-child(2)::before {
background: #82a443;
}
.pink,
.pink::after,
.year:nth-child(3)::before {
background: #e5567f;
}
.lightblue,
.lightblue::after,
.year:nth-child(4)::before {
background: #43c3d0;
}
.yellow,
.yellow::after,
.year:nth-child(5)::before {
background: #e9c43b;
}
<div class="experience">
<h2 class="pheader">Experience</h2>
<div class="timeline">
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date orange">2017</div>
<div class="time-content orange">
<h3>Title</h3>
<p> some text
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/school.png" alt="school"></div>
<div class="date green">2020</div>
<div class="time-content green">
<h3>Title</h3>
<p>Some Text
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/work.png" alt="briefcase"></div>
<div class="date pink">2022</div>
<div class="time-content pink">
<h3>Titel</h3>
<p>Some text
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/question.png" alt="question mark"></div>
<div class="date lightblue">2023</div>
<div class="time-content lightblue">
<h3>Title</h3>
<p>
some text
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/labtop.png" alt="laptop"></div>
<div class="date yellow">2024</div>
<div class="time-content yellow">
<h3>Title</h3>
<p>Some Text
</p>
</div>
</div>
</div>
</div>
<h2 class="pheader" id="portfolio">Portfolio</h2>
<div class="portfolio">
<div class="pimg">
<div class="section">
<a href="../Mini Projects/7.3 CSS Flag Project/index.html" target="_blank">
<div class="boxdecor">
<h3>Flag of Laos</h3>
</div>
<div class="innerimg"><img src="img/flag.png" alt="flag of laos" height="400px" width="500px"></div>
<p class="subtitle">Used relative and absolute position to create a Flag of Laos</p>
</a>
</div>
</div>
<div class="pimg">
<div class="section">
<a href="../Mini Projects/10.3 Mondrian Project/index.html" target="_blank">
<div class="boxdecor">
<h3>Mondrian Painting</h3>
</div>
<div class="innerimg"><img src="img/painting.png" alt="mondrian project" height="400px" width="500px"></div>
<p class="subtitle">Used grid responsive design to create a Mondrian Painting</p>
</a>
</div>
</div>
<div class="pimg">
<div class="section">
<a href="../Mini Projects/9.4 Flexbox Pricing Table Project/index.html" target="_blank">
<div class="boxdecor">
<h3>Pricing Table</h3>
</div>
<div class="innerimg"><img src="img/pricingtable.png" alt="pricing table" height="400px" width="500px"></div>
<p class="subtitle">Used Flexbox responsive design to create a Pricing Table </p>
</a>
</div>
</div>
<div class="pimg">
<div class="section">
<a href="../Mini Projects/11.3 TinDog Project/index.html" target="_blank">
<div class="boxdecor">
<h3>Dog Tinder</h3>
</div>
<div class="innerimg"><img src="img/tinydog.png" alt="dog" height="400px" width="500px"></div>
<p class="subtitle">Used Bootstrap to create a website about Dog Tinder</p>
</a>
</div>
</div>
</div>