浅谈移动端和流式布局
移动端，便是在手机上去访问我们的前端页面。
我们都知道，我们写PC端的前端页面是，需要考虑各种浏览的兼容性，我们写移动端也不例外，在移动端里，我们更多的是兼容手机的屏幕大小，毕竟这可能是他们惟一影响外观的东西。
因此，我们一般都会采用流式布局来完成移动端的页面。
在我们一般开始写移动端前，我们会在head标签里面加一个viewport，在这里面，我们需要设置一些属性值。
| 属性名 | 值 | 描述 |
|---|---|---|
| width | device-width | 设置宽度 |
| user-scalable | no | 是否允许用户自行缩放 |
| initial-scale | 1.0 | 默认缩放比例 |
| maximum-scale | 1.0 | 最大缩放比例 |
| minimum-scale | 1.0 | 最小缩放比例 |
在移动端， 流式布局是占有非常重要的位置。而对于我来说，流式布局便是尽量不要给宽度固定值，毕竟固定了就不能匹配各个手机的屏幕大小。在流式布局中，宽的值是非常重要的。所以，对于移动端来说，个人比较喜欢通过flex来布局我的页面，毕竟移动端不需要兼容IE啊！！！
1、布局特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示
2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。