CSS 中的响应式 Web 设计

Question

我对使用 CSS 相当陌生，因此一直在努力更好地理解响应式 web 设计，以便在我计划用作投资组合项目的网站上实施它。 我目前正在尝试在三种不同的屏幕尺寸（以像素为单位）时调整一组三个无序列表和一组 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; }

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

Answer 1

在您的容器上使用flexbox是一种非常灵敏且适合移动设备的方式来显示您的内容。 我在您的 HTML 中添加了一个container ，并给它一个柔性显示。 另外，我添加了justify-content: center; 以便在调整大小时一切都保持在中心。 请参阅我在下面所做的更改。

 .container { /* Sets page margins and max size */ max-width: 1000px; margin: 0 auto; text-align: center; display: flex; justify-content: center; flex-direction: column; }.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; }

 <div class="container"> <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>

Answer 2

您可能没有在 html 中设置视口

如果您没有在 html 的头部包含此行

<meta name="viewport" content="width=device-width, initial-scale=1.0">

每当您进行响应式设计时，您几乎都需要包含此行，因为它为浏览器提供了更多说明，以帮助确定何时响应。