响应式布局初步学习

一直想学习响应式布局的基础知识，然后结合基础知识写一些小的demo，今天从一个最简单的header菜单写起，一步步学习响应式设计。

需求：实现一个简答的菜单功能，在大屏幕的时候横向多列排列，而在小屏幕的时候是有一列，菜单项目纵向排列。

1、html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>menu-nav</title>
</head>
<body>
<div class="flex-container">
	<div class="nav">我的笔记</div>
	<div class="nav">个人主页</div>
	<div class="nav">登录注册</div>
</div>
</body>
</html>

这里我们知道，我的菜单有三个，分别是我的笔记，个人主页，以及登录注册。

下面是css，很显然我会使用媒体查询：

* {
	margin:0;
	padding:0;
}

html {
	font-size:16px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.flex-container {
	display: flex;
	flex-direction:column;
	font-size:1.5rem;
	text-align: center;
}

.nav {
	background-color: darkgray;
	padding: 15px;
	flex: 50px;
	line-height:2;
}

.nav:hover{
	background-color: lightgray;
}

@media (min-width: 768px) {
	.flex-container {
		flex-direction: row;
	}
}

多列的情况：

一列的情况：

一直以为，基础知识是高楼大厦的根本。