返回

搭建APP框架：CSS网格布局与CSS自定义变量的巧妙组合

前端








# **用CSS网格和变量搭建App原型：简单易行的秘诀** 

如果你厌倦了原型设计工具，想要用代码快速实现你的想法，那么CSS网格和CSS自定义变量绝对是你的秘密武器。

CSS网格布局，让你轻松创建复杂的布局，就像搭建积木一样简单；CSS自定义变量，让你可以轻松更改整个应用程序的主题和外观，只需一行代码即可。

结合使用这两个特性，你可以在几分钟内快速搭建出一个App原型。在这篇文章中，我将向你展示如何做到这一点。


## **构建简单的App结构** 

首先，让我们搭建一个简单的App结构。我们先创建一个名为index.html的文件，并在其中添加以下代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <header>
      <h1>App</h1>
    </header>
    <main>
      <p>Main content</p>
    </main>
    <footer>
      <p>Copyright &copy; 2023</p>
    </footer>
  </div>
</body>
</html>

这是一个简单的HTML结构，包含了一个div容器，里面包含了页眉、主体和页脚。

应用CSS网格布局

接下来，我们来使用CSS网格布局来布局这个App。在style.css文件中添加以下代码：

#container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

header {
  grid-row: 1;
}

main {
  grid-row: 2;
}

footer {
  grid-row: 3;
}

这段代码使用CSS网格布局来将容器划分为三行，第一行和第三行为自动高度，第二行为剩余空间。然后，我们将页眉、主体和页脚分别放在第一行、第二行和第三行。

添加CSS自定义变量

现在，我们来使用CSS自定义变量来设置App的颜色和字体。在style.css文件中添加以下代码：

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-family: sans-serif;
}

body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  font-family: var(--font-family);
}

h1 {
  color: white;
}

这段代码定义了三个自定义变量：--primary-color、--secondary-color和--font-family。然后，我们在body元素中使用了这些变量来设置背景颜色、文本颜色和字体。

优化UI细节

最后，我们可以添加一些额外的CSS来优化UI细节。例如，我们可以为页眉和页脚添加一些边框，并为主体添加一些内边距。在style.css文件中添加以下代码：

header {
  border-bottom: 1px solid var(--secondary-color);
}

footer {
  border-top: 1px solid var(--secondary-color);
}

main {
  padding: 1rem;
}

现在，我们的App原型就完成了！你可以用它来演示你的想法，或者作为开发真实App的基础。

结语

CSS网格布局和CSS自定义变量是前端开发的强大工具。你可以将它们结合使用来快速搭建应用程序原型。如果你想了解更多关于它们的内容，可以参考我的第15、16课。