我有一个使用固定尺寸和像素构建的网格布局，但我不确定如何使其响应？我读过有关使用 fr 的内容，但我不明白如果不为容器设置特定宽度，它是如何工作的？这是一个好的做法吗？
其次，这与我反复遇到的另一个更普遍的问题有关，并且在任何指南中都没有得到很好的解答：我应该如何设置页面的整体宽度和高度 - 最佳实践是什么？我尝试过 100vw、100vh、100% 和 auto，但它们似乎都存在一些问题。我想要一个适合屏幕高度和宽度的布局。
HTML + CSS
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content">
<div class="container">
<div class="header"></div>
<div class="nav"></div>
<div class="sidebar"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
</div>
</body>
</html>
.content {
max-width: 960px;
margin: auto;
}
.container {
display: grid;
grid-template-rows: 200px 200px 600px 100px;
grid-template-columns: 300px 700px;
gap: 15px;
}
.header {
background-color: blue;
grid-area: 1 / 1 / 2 / 3;
}
.nav {
background-color: red;
}
.sidebar {
background-color: green;
grid-area: 2 / 1 / 4 / 2;
}
.main {
background-color: brown;
}
.footer {
background-color: chocolate;
grid-area: 4 / 1 / 4 / 3;
}
为了使网格布局具有响应性并解决您对设置页面整体宽度和高度的担忧，您可以使用各种 CSS 单元和属性来创建灵活的响应式设计。这里有一些建议：
1。使用 fr 单位进行网格布局： 您可以使用 fr 单位（分数单位）来使网格布局具有响应性，而不是为网格行和列设置固定像素大小。通过这样做，网格将自动适应容器中的可用空间。
以下是修改网格布局的方法：
.container {
display: grid;
grid-template-rows: 1fr 1fr 3fr 0.5fr; /* Use fr units for rows */
grid-template-columns: 30% 70%; /* Use percentages for columns */
gap: 15px;
}
这允许网格行占用可用空间的一部分，从而使其更具响应性。
2.页面宽度和高度的视口单位： 要设置页面的整体宽度和高度以适合屏幕，您可以使用视口单位，例如 vw（视口宽度）和 vh（视口高度）。这些单位是相对于视口的，它们可以帮助您创建适应屏幕尺寸的布局
.content {
max-width: 960px;
margin: auto;
height: 100vh; /* Set content height to 100% of viewport height */
}
通过将 .content 高度设置为 100vh，它将填充视口的整个高度。
3.移动响应的媒体查询： 为了使您的设计更适应不同的屏幕尺寸，请考虑使用媒体查询。您可以为不同的屏幕宽度定义特定的 CSS 规则，这有助于确保您的布局在大屏幕和移动设备上看起来都很好。
以下是移动响应性媒体查询的示例：
@media (max-width: 768px) {
.container {
grid-template-rows: 1fr 2fr 2fr 0.5fr;
grid-template-columns: 1fr;
}
}
此媒体查询调整最大宽度为 768 像素的屏幕的网格布局。
通过结合这些技术，您可以创建响应式网格布局，以适应各种屏幕尺寸并保持灵活的设计。请记住在不同的设备上测试您的布局并根据需要调整 CSS 规则以实现所需的响应能力。
对于响应式布局，如果您还没有添加以下元标记，请不要忘记将其添加到您的 HTML 中。
<meta name="viewport" content="width=device-width, initial-scale=1">