vw/vh 加 flex 移动端布局

vw / vh 是什么

vw 和 vh 都是单位，一种相对单位，他们只相对于视口 1 vw = 1/100 窗口宽度、1 vh = 1/100 窗口高度，在实际的开发中一般不常用 vh ，高度均由内容撑开。

vw 和 rem 的区别

rem 在市场中比 vw 常见许多，但是使用 rem 需要不停的修改 html 的 font-size 值并且还需要媒体查询 (media) 以及 js ，而 vw 则完全不需要那些，只需使用 less 里的变量定义保准稿的大小就可以随意使用，虽然现在的使用还不普遍，但在将来我觉得一定会成为主流。

rem 和 vw的兼容性

rem 的兼容性也确实如下图所示比 vw 要好上不少：

flex 是什么

flex 是一种非常简捷的布局方式，弹性布局在移动端应用非常普遍，皆因弹性布局不似浮动 (float) 和定位 (position) 一样会脱离标准流，不会出现各种奇奇怪怪的盒子塌陷问题。

flex 布局

flex 布局也叫弹性布局，常用的属性值有：

1、display: flex; 写在需要布局的父盒子里让子盒子变为弹性容器，在弹性布局里没有块元素、行内元素、行内块元素之分ÿ