布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

移动设备上的viewport 响应式设计

响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配

https://www.cnblogs.com/2050/p/3877280.html

vw视口单位

视口单位中的“视口”，在桌面端，毫无疑问指的就是浏览器的可视区域；但是在移动端，它指的则是三个 Viewport 中的 Layout Viewport 。

https://github.com/dwqs/blog/issues/5

https://aotu.io/notes/2017/04/28/2017-4-28-CSS-viewport-units/

http://www.cnblogs.com/wengxuesong/archive/2016/05/16/5497653.html

里面有的含义：移动优先，自小屏幕向大屏自适应，屏幕在大于600px时设置字体18px，屏幕在大于800px时设置字体20px

可以用以下方法实现一样效果

缺点：屏幕过小过大字体就会模糊和难以阅读。

html { font-size: 3vw; }