CSS3 Flexbox 中的简约干净响应式布局：桌面 <> 移动切换答案

【问题标题】：Minimalistic Clean Responsive Layout in CSS3 Flexbox: Desktop <> Mobile toggleCSS3 Flexbox 中的简约干净响应式布局：桌面 <> 移动切换
【发布时间】：2017-10-28 03:31:50
【问题描述】：

我正在尝试在 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>

【问题讨论】：

标签： css mobile responsive-design flexbox desktop

【解决方案1】：

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

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>

【讨论】：

啊啊啊就是这样！感谢+1并接受！现在可以了。 PS min-height: 100vh; 实际上在这里做什么？ vh 是什么意思，vh 的替代品是什么？
vh 是视口高度的 1/100。所以 100vh 使元素的高度等于视口。您也可以使用 100%。
啊，我明白了，谢谢。（“你也可以使用 100%”）。但是，我确实看到当我在 min-height 中使用 100% 而不是 100vh 时，高度并没有完全填满……也许你想以不同的方式使用 100%？
当你在 body 上使用 height: 100% 时，它会占用父级的 100% 高度。但是父级是html。所以你需要更进一步，还要声明 html { height: 100%;}。现在，html 是窗口的全高，body 是 html 的全高
啊，我明白了，谢谢！ +1