【发布时间】：2022-01-18 05:07:26
【问题描述】：
我对使用 CSS 相当陌生，因此一直在努力更好地理解响应式网页设计，以便在我计划用作投资组合项目的网站上实施它。我目前正在尝试在三种不同的屏幕尺寸（以像素为单位）时调整一组三个无序列表和一组 6 个图像的大小。当我在开发模式下打开项目并尝试使用响应式时，页面上没有任何变化，因为它坚持每个项目每行三个的大尺寸。查看我的代码后，似乎我所做的任何事情都不正确，我可以使用一些帮助来审查它。
在我的 CSS 文件中，.ProjectImageGrid 指的是用于根据设备大小对图像进行排序的网格，.AboutMeGrid 是我的三个无序列表的网格，.ProjectImage 和 .AboutMeLists 分别用于两者的格式化。如果您想查看这部分的 HTML 代码，我也会在下面列出，但我认为问题不在该代码中。
.container { /* Sets page margins and max size */
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.AboutMeGrid {
display: grid;
grid-template-columns: 100%;
}
@media (min-width: 600px) {
.AboutMeGrid {
grid-template-columns: 50% 50%;
}
}
@media (min-width: 900px) {
.AboutMeGrid {
grid-template-columns: 1fr 1fr 1fr;
}
}
.ProjectImageGrid {
display: grid;
grid-template-columns: 100%;
}
@media (min-width: 600px) {
.ProjectImageGrid {
grid-template-columns: 50% 50%;
}
}
@media (min-width: 900px) {
.ProjectImageGrid {
grid-template-columns: 1fr 1fr 1fr;
}
}
.ProjectImage {
justify-self: center;
padding: 4%;
}
.AboutMeLists {
list-style: none;
font-style: italic;
color: blue;
}<!DOCTYPE html>
<html>
<head>
<title>My First Site</title>
<link rel="stylesheet" href="style.css"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="Intro">
<img src="Assets/gvbhnj.jpg" width="150" height="150"/>
<h1 id="MyName">Name Here</h1>
<h3>Simple Bio</h3>
<p>You miss 100% of the shots you don't take</p>
</div>
<div class="AboutMeGrid">
<div class="IAm">
<h1>I am</h1>
<ul class="AboutMeLists">
<li>Hard working</li>
<li>A team player</li>
<li>Willing to try new things</li>
</ul>
</div>
<div class="Hobbies">
<h1>I like to</h1>
<ul class="AboutMeLists">
<li>Play Baseball</li>
<li>Play videogames</li>
<li>Practice coding</li>
</ul>
</div>
<div class="LinkSet">
<h1>My Links</h1>
<ul class="AboutMeLists">
<li>
<a href="https://GitHub.com/SampleLink">GitHub</a>
</li>
<li>
<a href="https://LinkedIn.com/in/SampleLink">LinkedIn</a>
</li>
<li>
<a href="https://www.facebook.com/SampleLink/">Facebook</a>
</li>
</ul>
</div>
</div>
<div>
<h1>My Projects</h1>
<div class="ProjectImageGrid">
<img class="ProjectImage" src="https://via.placeholder.com/300"/>
<img class="ProjectImage" src="https://via.placeholder.com/300"/>
<img class="ProjectImage" src="https://via.placeholder.com/300"/>
<img class="ProjectImage" src="https://via.placeholder.com/300"/>
<img class="ProjectImage" src="https://via.placeholder.com/300"/>
<img class="ProjectImage" src="https://via.placeholder.com/300"/>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
标签： html css responsive-design