CSS3 弹性框中简约干净的响应式布局：桌面<>移动切换

我正在尝试在 CSS3 Flex 中实现简单简洁的响应式布局，其中：

A( 在桌面模式下，主体包含三个并排"全部在一行"的垂直元素，并且;
B(另一种垂直导向的移动版本模式，其中主体将元素作为行彼此重叠，"全部在一列中"。

但是我的代码在某处损坏了，因为在调整窗口大小以缩小垂直方向时，我没有看到移动版本启动。我错过了什么？

*{
	     margin: 0;
	    padding: 0;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
body {
         display: flex;
         min-height: 100vh;
         flex-direction: row;
         flex: 1;
         background: yellow;
}
main {
	flex: 2;
	background: tomato;
}
nav {
	flex: 1;
	background: tan;
}
aside {
	flex:1;
	background: thistle;
}
/* FOR MOBILE PHONES */
@media only screen and (orientation: vertical) and (max-width: 768px) {	
	body{
		flex-direction: column;
	}
	main {
		background: crimson; /* test to see if mobile mode is activated */
	}
}

<body>
    <main>content</main>
    <nav>nav</nav>
    <aside>aside</aside>
</body>

方向：可以是纵向或横向：

body {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  flex: 1;
  background: yellow;
}
main {
  flex: 2;
  background: tomato;
}
nav {
  flex: 1;
  background: tan;
}
aside {
  flex: 1;
  background: thistle;
}
/* FOR MOBILE PHONES */
@media only screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
  main {
    background: crimson;
  }
}

<body>
  <main>content</main>
  <nav>nav</nav>
  <aside>aside</aside>
</body>

相关内容

最新更新

热门标签：