浅谈移动端和流式布局

浅谈移动端和流式布局

移动端，便是在手机上去访问我们的前端页面。

我们都知道，我们写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 等属性控制尺寸流动范围以免过大或者过小影响阅读。